CSS - 绝对在固定范围内，滚动溢出和 100% 高度

Question

我正在尝试使用某种可滚动的叠加层来屏蔽网站的其余部分。 我的固定元素中的绝对元素似乎无法获得 100% 的高度。

http://codepen.io/intellix/pen/GBltK

section {
  background: red;
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow-x:auto;

}

article {
  background: blue;
  position: absolute;
  top:0;
  width:300px;
  bottom: 0;
  left: 0;
}

如果我设置底部：0;在绝对元素上，当页面不溢出时它会填充高度。当页面溢出时，它会留下一个间隙。

当我在绝对元素上使用底部：自动时，它会用溢出填充高度，但会留下一个没有溢出的间隙！

如果您调整窗口大小使内容适合，然后调整大小使内容不适合，您会发现它在这两种情况下都不起作用。

Answer 1

我想你想在这里使用 min-height 和 bottom:auto。

article {
  background: blue;
  position: absolute;
  top:0;
  width: 300px;
  bottom: auto;
  min-height: 100%;
  left: 0;
}

您需要min-height:100%; 而不能使用height:100%; 的原因是，当section 内容可滚动时，它的高度实际上大于 100%。

更长的解释：

对于定位的 (position: relative|fixed|absolute;) 元素，基于百分比的高度是相对于它们的偏移父元素确定的。对于article 元素，它的偏移父元素是section 元素。

section 元素使用top:0px; 和bottom:0px; 来确定它的高度。这些值由它的偏移父元素的高度决定，即html 元素

html 是一种特殊情况，其中height:100%; 是可视窗口的大小，这就是可滚动元素的高度大于 100% 的原因。