我需要建立一个动态调整大小的滚动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/

10-12 13:02
查看更多