我正在尝试使用某种类型的可滚动叠加层来覆盖网站的其余部分.
我似乎无法在我的固定元素中的绝对元素上获得100％的高度.
我似乎无法在我的固定元素中的绝对元素上获得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;在绝对元素上,它在页面不溢出时填充高度.页面溢出时会留下空隙.
当我使用bottom：auto在我的绝对元素上,它会溢出溢出的高度,但留下一个没有溢出的间隙！
解决方法
我想你想使用min-height和bottom：auto here.
article {
background: blue;
position: absolute;
top:0;
width: 300px;
bottom: auto;
min-height: 100%;
left: 0;
}
你需要最小高度的原因：100％;并且不能使用高度：100％;是因为当滚动的部分内容时它的高度实际上大于100％.
更长的探索：
对于定位(位置：相对|固定|绝对;)元素,基于百分比的高度是相对于其偏移父项确定的.在article元素的情况下,它的偏移父元素是section元素.
section元素使用top：0px;和底部：0px;确定它的高度.这些值由它的偏移父级(html元素)的高度决定
html是一个特殊情况,其中身高：100％;是可视窗口的大小,这就是您的可滚动元素的高度大于100％的原因.
