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 here。

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

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

更长explination：

与位于（position: relative|fixed|absolute;）元素，基于百分比高度是相对于它们的偏移父母确定。在article元素的情况下，它的偏移父元素是section元素。

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

html就是height:100%;是视图，能够窗口的大小一种特殊情况，这就是为什么你的滚动元件的高度大于100％ 。