html – CSS – 绝对固定,带有溢出滚动和100％高度

概述我正在尝试使用某种类型的可滚动叠加层来覆盖网站的其余部分. 我似乎无法在我的固定元素中的绝对元素上获得100％的高度. http://codepen.io/intellix/pen/GBltK section { background: red; position: fixed; top:0; right:0; bottom:0; left:0; overflow-x: 我正在尝试使用某种类型的可滚动叠加层来覆盖网站的其余部分.
我似乎无法在我的固定元素中的绝对元素上获得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％的原因.

总结

以上是内存溢出为你收集整理的html – CSS – 绝对固定,带有溢出滚动和100％高度全部内容，希望文章能够帮你解决html – CSS – 绝对固定,带有溢出滚动和100％高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。