为什么带有“display：flex”和“position：fixed”的div没有占据全部可用宽度？答案

【问题标题】：Why does div with "display: flex" and "position: fixed" doesn't occupy the full available width?为什么带有“display：flex”和“position：fixed”的div没有占据全部可用宽度？
【发布时间】：2017-10-01 07:13:24
【问题描述】：

我注意到当div 具有position: fixed 和display: flex 时，它不会像普通divs 那样占据全部可用宽度。

.container {
  display: flex;
  background-color: #ddd;
  margin-top: 50px;
}

.fixed {
  position: fixed;
}

.content {
  background-color: #bbb;
  flex-grow: 1;
}

<div class="container">
  <div>Title</div>
  <div class="content">Content</div>
</div>

<div class="container fixed">
  <div>Title</div>
  <div class="content">Content</div>
</div>

如何更改我的 CSS 以使第二个容器像第一个容器一样占据整个可用宽度？

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

为什么？已经被Michael_B回答了

...它是外流...

您还可以做的是从左右坐标中调整fixed元素的大小，而不是width:100%;，这往往是麻烦制造者而不是帮助。

如果是body的直接子代，也可以继承margins。

.container {
  display: flex;
  background-color: #ddd;
  margin-top: 50px;
}

.fixed {
  position: fixed;
  left:0;
  right:0;
  margin-left:inherit;
  margin-right:inherit;
}

.content {
  background-color: #bbb;
  flex-grow: 1;
}

<div class="container">
  <div>Title</div>
  <div class="content">Content</div>
</div>

<div class="container fixed">
  <div>Title</div>
  <div class="content">Content</div>
</div>

【讨论】：

【解决方案2】：

第一个容器代表一个流入块级元素。这些元素被设计为垂直堆叠。这意味着它们占据了父容器的整个宽度。

第二个容器代表一个绝对定位的元素（固定定位是绝对定位的一种形式）。这意味着该元素是外流的并且不占用任何空间。

与流内块级元素不同，绝对定位元素并非设计为垂直堆叠。所以没有自动全宽。绝对定位元素的默认宽度和高度基于其内容。要覆盖默认大小，请设置您自己的长度。

.container {
  display: flex;
  background-color: #ddd;
  margin-top: 50px;
}

.fixed {
  position: fixed;
  width: 100%; /* new */
  /* alternatively, you can use left: 0 and right: 0 */
}

.content {
  background-color: #bbb;
  flex-grow: 1;
}

<div class="container">
  <div>Title</div>
  <div class="content">Content</div>
</div>

<div class="container fixed">
  <div>Title</div>
  <div class="content">Content</div>
</div>

【讨论】：

width: 100% 和 left: 0; right: 0 的宽度都比第一个容器宽。
浏览器通常给body元素一个默认的6-8px的边距。带有流入块级容器的第一个容器尊重该边距。从正常流程中删除的第二个容器忽略了边距。只需将body { margin: 0; } 添加到您的代码中：jsfiddle.net/jdf9ugy9
有趣。所以，即使容器有一个外部容器（其父容器是body），如果不设置body 的样式，就无法设置外部容器的样式以达到预期的效果？ jsbin.com/vivuvopeno/1/edit?html,css,output
当您将一个元素设置为position: fixed 时，它的引用将成为最高级别的包含块（html / 视口）。它忽略所有其他容器。
如果外部容器有margin-left/right，我们该怎么办？ jsbin.com/yihazuzivu/1/edit?html,css,output

【解决方案3】：

您必须添加 width: 100%; ，否则宽度将与元素的内容一样宽。

另外，您应该添加html, body { margin: 0; } 以避免默认边距。

顺便说一句：这与display: flex 无关，而仅与position: fixed...

html, body {
margin: 0;
}
.container {
  display: flex;
  background-color: #ddd;
  margin-top: 50px;
}

.fixed {
  position: fixed;
  width: 100%;
}

.content {
  background-color: #bbb;
  flex-grow: 1;
}

<div class="container">
  <div>Title</div>
  <div class="content">Content</div>
</div>

<div class="container fixed">
  <div>Title</div>
  <div class="content">Content</div>
</div>

【讨论】：