我需要构建一个动态调整大小的滚动 div。
div 应动态调整大小以适应屏幕。但如果内容不适合屏幕,它应该显示一个滚动条。因此浏览器自己的滚动条永远不需要激活。
我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中overflow: auto
.
<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%
,但遗憾的是不是 - 该属性似乎被忽略,并且滚动条没有出现。
我尝试将 div 放入表格中height:100%
,并将第一个 div 设置为height:auto
,希望它能从其父级获得高度。但 div 似乎仍然忽略了 height 属性。
所以我的问题是:可以仅使用 html 来完成此操作,还是使用 javascript 来完成?
你可以使用绝对定位拉伸 div http://alistapart.com/article/conflictingabsolutepositions#section4。这样,它将始终采用浏览器窗口(或最近的定位祖先)的大小。
给定这个 HTML:
<div id="gridcontainer"></div>
CSS 应该是这样的:
#gridcontainer {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
现场演示 http://jsfiddle.net/bazmegakapa/LXRcq/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)