Question

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

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;在绝对元素上，它在页面不溢出时填充高度。当页面溢出时会留下空隙。

当我使用bottom：auto on my absolute element时，它会溢出溢出的高度，但会留下一个没有溢出的间隙！

如果您调整窗口大小以使内容适合然后调整大小以使内容不适合，则可以看到它在两种情况下都不起作用。

Answer 1

我想你想使用min-height和bottom：auto here。

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％的原因。

CSS - 绝对固定，带有溢出滚动和100％高度

1 个答案: