html - 如何让一个div填充父元素

Question

每当我设置 DIV 样式时:

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

我开始努力将 div 宽度设置为适合/包裹父元素的整个宽度。如果我设置为 width: 100%; 横跨整个页面。 max-width, min-width 的行为都是一样的。我怎样才能解决这个问题，使 div 元素完全适合父元素？

Answer 1

请记住，当您将元素声明为 position: fixed 时，您是在将其从文档的“正常”流中取出 - 所以不要指望应用正常规则...举个例子:

.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>

如您所见，即使类 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 出现在文档的最顶部，您'您还需要确保父 div 位于文档的开头。