我需要建立一个动态调整大小的滚动div。
div应该动态调整大小以适合屏幕。但是,如果内容不适合屏幕显示,则应显示一个滚动条。因此,浏览器自己的滚动条永远不需要激活。
通过在其中放置另一个div并使用overflow: auto
,可以使滚动条显示在div中。
<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
<div id="gridcontent" style="height:100%">
<!--Put loads of text in here-->
</div>
</div>
麻烦的是,这仅在第一个div具有固定高度时才有效。我曾希望可以将第一个div设置为
height:100%
,但遗憾的是,此属性似乎被忽略了,滚动条也没有出现。我尝试将divs与
height:100%
放在表中,并将第一个div设置为height:auto
,希望它的高度可以比其父级高。但是div似乎仍然忽略了height属性。所以我的问题是:这可以仅使用html来完成,还是可以使用javascript来解决?
最佳答案
您可以stretch the div using absolute positioning。这样,它将始终占据浏览器窗口(或最接近的祖先)的大小。
鉴于此HTML:
<div id="gridcontainer"></div>
CSS应该是这样的:
#gridcontainer {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
Live Demo
关于javascript - 没有固定高度的滚动div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5564455/