Question

更新：这是一个仅限Chrome的错误，正如Josh Crozier所说的那样。

垂直调整窗口大小，以查看下面代码无效的原因。子元素不会保留在父元素的底部。为什么呢？

header {
  background: red;
  height: 50%;
  left: 0;
  position: fixed;
  width: 300px;
}
header div {
  bottom: 0;
  position: absolute;
}

<header>
  <div>Lorem</div>
</header>

Answer 1

这是目前的Chrome错误（从版本47开始，可能是早期版本）。

它似乎只适用于具有固定定位的元素。问题是在调整大小或滚动时元素被重新绘制/重新发送错误。值得指出的是，元素肯定是重新绘制/渲染的，但似乎就像它们在DOM加载时相对于它们的初始位置呈现的那样。

此行为可能与问题454216，153738和20574有关。

一个解决方法是包装元素并将其相对于父元素绝对定位，其高度与header祖先元素的高度相同：

header {
  height: 50%;
  left: 0;
  position: fixed;
  width: 100%;
}
header .wrapper {
  background: red;
  height: 100%;
  width: 300px;
  position: relative;
}
header .wrapper > div {
  bottom: 0;
  position: absolute;
}

<header>
  <div class="wrapper">
    <div>Lorem</div>
  </div>
</header>

Answer 2

因为<h1>有自己的margin。尝试

header h1 {
  bottom: 0;
  position: absolute;
  margin-bottom: 0;
}

为什么子元素不会停留在固定父元素的底部？

2 个答案: