Question

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?

Answer 1

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