Div Height = 100% - 50px
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!
This is easy to do in mozilla and good browsers because all you need to do is set the top and bottom positions accordingly and the element stays on the bottom and at the top position as required.
Unfortunately ie does not obey these rules so the only solution is a bit convoluted.
I originally posted this as a test in the forum in this thread.
The answer to the problem is in this layout:
However it relies on a bit of hacking for both browsers (moz and ie - I haven't tested other browers) and forcing quirks mode for ie with the xml prologue. ()
You can study it if its any use and borrow the code but its not that elegant a solution ;).