当内容溢出时,我需要制作一个可滚动的div。值得注意的是,由于布局原因,div是display: table/table-row
系统的一部分。限制显示:高度动态时的表格行/单元元素高度
底侧栏容器需要允许滚动时的含量超过高度。我遇到的问题是 - 使用这种类型的布局 - CSS无法将较低的div锁定到其父级的动态确定高度(.holder
)。它要么需要百分之百的高度,要么百分之百是其父母的高度,这太大了。
我的目标是用纯CSS解决这个问题,这样我们可以避免在改变边栏元素的高度时运行javascript。
.wrapper-page { position: absolute; top: 38px; bottom: 10px; left: 10px; right: 10px; overflow: hidden; }
.sidebar { width: 25%; height: 100%; }
.holder { width: 100%; height: 100%; display: table; table-layout: fixed }
.holder > div:first-child { height: 25%; max-height: 25%; }
.holder > div { display: table-row; table-layout: fixed }
正因为如此布局,只有sidebar
将正常如果我们使用overflow-y: scroll
滚动 - 但滚动整个侧边栏。 .holder > div:last-child
是应该滚动的。
<div class="wrapper-page">
<div class="sidebar">
<div class="holder">
<div>
box one<br>
</div>
<div>
box two<br>
</div>
</div>
</div>
</div>
你能够使用'box-sizing:border-box'吗?如果是这样,请通过百分比设置高度,然后将溢出设置为您喜欢的任何配置。 – RedYetiCo
我不能使用box-sizing,因为我们别无选择,只能支持IE7,而且polyfill的性能消耗太大。 – helion3
所以,你在说'.holder> div:last-child {overflow-y:scroll; ''不工作?这是IE7要求还是其他的限制? – RedYetiCo