Scrolling div without fixed height
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
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>