Question

76

Scrolling div without fixed height

rated 0 times [ 78] [ 2] / answers: 1 / hits: 37445 / 13 Years ago, wed, april 6, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anitadevonm

Add To Favorites

Follow

Total Points: 730

Total Questions: 93

Total Answers: 74

Location: Estonia

Member since Wed, Jun 8, 2022

2 Years ago

anitadevonm questions

1 Find object from an array of nested objects by key in JavaScript

Wed, Jul 28, 21, 00:00, 3 Years ago

1 AG-Grid React, trouble getting custom cell renderer to update when data changes. Function components are behaving differently than class components

Thu, May 14, 20, 00:00, 4 Years ago

1 Adding Role Based Redirection Upon Login to React App

Mon, Jul 15, 19, 00:00, 5 Years ago

1 Find the double jquery.js include and remove it

Tue, Jul 2, 19, 00:00, 5 Years ago

1 Can't get the element id on an onChange event in JavaScript via JQuery

Mon, Jul 1, 19, 00:00, 5 Years ago

View All

answered 13 Years ago juand · Accepted Answer

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