I know this has probably been asked over and over already, but I am struggling to find a thread w/ exactly what I need.

I am creating a page that has 3 divs. A header, a nav bar, and a content div. They are all listed from top to bottom. I have the header with height: 30px;, the navbar with height: 20px and then I need the content div to stretch to the rest of the browser window.

Now, on top of this, I need the content div to put up a scroll bar on overflow instead of growing further. The end product should be 3 stacked sections, the top 2 50px and the bottom one the rest of the frame and scrollable.

Unfortunately, when I set it up, I get the 50px for the top two and then a layer that would be 100% of the window height had the 50px not been there. I tried putting them all in a container div w/ 100% height but I still got the same problem.

Any help would be greatly appreciated!