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

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>