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;
}