Scrolling div without fixed height

javascript html css layout scroll

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

javascript html css layout scroll

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>

Expand snippet