Question

每当我将DIV设为：

.div {
    position: fixed;
    z-index: 9999;
}

我开始努力设置div宽度以适合/包裹父元素的整个宽度。如果我设置为整个页面的width: 100%;延伸。 max-width，min-width的行为方式相同。我如何解决这个问题，以便div元素完美地适合父元素？

Answer 1

在父元素上尝试：position: relative; display: block。

第一个方兴未知的宽度％比例 WITH position: relative。

编辑：正如@David Wilkinson所提到的，因为它们是根据窗口大小设置的，因此无法使用％width。但是，您可能想尝试：width: inherit（在固定的bloc和设置大小的父级和固定的bloc之间的任何一个区域）。

http://codepen.io/Carele/pen/ezBbwV 在这里工作

Answer 2

请记住，当您将元素声明为position: fixed时，您将其从文档的“正常”流程中取出 - 因此不要指望应用正常规则...举个例子：< / p>

.wrapper {
  width: 50%;
  background-color: red;
  height: 100px;
  margin: 0 auto;
}
.fixed {
  position: fixed;
  width: 100%;
  height: 50px;
  background: yellow;
  top: 0;
  left: 0;
}

<div class="wrapper">
  <div class="fixed">
    FIX ME!
  </div>
</div>

正如你所看到的，即使div fixed的div在我将其位置设置为100％时仍超出其父元素的宽度......

要模仿您要执行的操作，请尝试在子元素上使用position: absolute并在父元素上使用relative的其他方法：

.wrapper {
  width: 50%;
  background-color: red;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
.fixed {
  position: absolute;
  width: 100%;
  height: 50px;
  background: yellow;
  top: 0;
  left: 0;
}

<div class="wrapper">
  <div class="fixed">
    FIX ME!
  </div>
</div>

注意 - 您可能需要向父元素添加一些顶部填充，以便子元素不与父元素的内容重叠...如果您还希望子div显示在文档的最顶部，那么'' ll还需要确保父div位于文档的开头。

如何使div填充父元素

2 个答案: