CSS, overflow auto, scrolling a DIV instead of whole page

Question

Simple example with div below another div, the first one displays a video with a 100% width, the other one's got some overflowing text inside.. all I want is to scroll the second div instead of a whole page:

<div id="bot" style="overflow:auto;">

http://jsfiddle.net/H7uhM/1/

//edit I removed z-index because it's a leftover from the master code. The height of video may vary, and that's why setting the #bot div to a constant height is not the solution. The video depends on a ration my have between 35%-50% of the page's height.

Answer 1

you need to change your style to be overflow-y: scroll; and you need a height otherwise the element will continue growing to accommodate the contents.

Example:

<div id="bot" style="overflow-y:scroll; height: 250px;">

Also, the z-index was irrelevant

If you want to use Javascript, you can achieve your desired effect like this:

<script>
window.onload = function () { 
    var bot = document.getElementById('bot');
    bot.style.height = (window.innerHeight - document.getElementById('top').offsetHeight) + "px";
}
</script>

JSFiddle