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

Posted 2023-03-07

【中文标题】CSS - 绝对在固定范围内，滚动溢出和 100% 高度

【英文标题】：CSS - absolute within fixed with overflow for scrolling and 100% height

【发布时间】：2013-02-20 12:48:45

【问题描述】：

我正在尝试使用某种可滚动的叠加层来屏蔽网站的其余部分。 我的固定元素中的绝对元素似乎无法获得 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;在绝对元素上，当页面不溢出时它会填充高度。当页面溢出时，它会留下一个间隙。

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

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

【问题讨论】：

别在意我之前的评论，这是不正确的。

【参考方案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% 的原因。

【讨论】：

非常感谢，工作。现在我不知道为什么需要 min-height 而不是 height，如果你知道为什么？

我在答案中添加了一个冗长的解释:-)