我需要构建一个动态调整大小的滚动div。
div应该动态调整大小以适合屏幕。但如果内容不适合在屏幕上,它应该显示一个滚动条。因此,浏览器自己的滚动条不应该成为活动的。
我可以通过在div中放置另一个div并使用 overflow:auto 。
< div id =gridcontainerstyle = ; height:300px; width:100px; > < div id =gridcontentstyle =height:100%> <! - 在这里加载文本 - > < / div> < / div>麻烦的是,这只有在第一个div具有固定高度时才起作用。我希望我可以设置第一个div到 height:100%,但很遗憾没有 - 这个属性似乎被忽略,滚动条不显示。 / p>
我试着把div放在一个有 height:100%的表中,并将第一个div设置为 height:auto ,希望它可以从其父级的高度。但是div仍然似乎忽略了height属性。
所以我的问题是:这可以使用html,或者 - 失败 - javascript?
解决方案您可以使用绝对定位拉伸div 。这样,它总是占用浏览器窗口(或最接近的已定位祖先)的大小。
给定此HTML:
< div id =gridcontainer>< / div>CSS应该是:
#gridcontainer { position:absolute; top:0; bottom:0;左:0; right:0; overflow:auto; }演示
I need to build a dynamically-resizing scrolling div.
The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active.
I can get a scrollbar to appear in the div by placing another div inside it and using 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>The trouble is that this only works when the first div has a fixed height. I had hoped I could just set the first div to height:100%, but sadly not- this property appears to get ignored, and the scrollbar just doesn't appear.
I have tried putting the divs in a table with height:100%, and setting the first div to height:auto, hoping it might take its height from its parent. But the div still seems to ignore the height property.
So my question is: Can this be done using just html, or- failing that- javascript?
解决方案You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).
Given this HTML:
<div id="gridcontainer"></div>the CSS should be something like:
#gridcontainer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; }Live Demo
更多推荐
滚动div没有固定高度
发布评论