Scrolling div without fixed height

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 disp

Answer 1

Since IE9 you can use viewport units.

Let's say that the height of your container is dynamic, unless its size is greater than the window height. In that case we stop the expansion & activate the scroll.

#container{
  background: #eaeaea;
  max-height: 100vh;
  overflow-y: scroll;
}

div{
  outline: 1px solid orange;
  width: 200px;
  height: 200px;
}

<div id='container'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

If you are trying to make element fit the screen then you can set the value of hight and width of the element to 100%.

You will also need to set the height of html and body

html, body {height: 100%}
#gridcontaine {
   height: 100%;
   width: 100%;
 }

Answer 3

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