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.
When you specify the 100%, that's what it means, 100% of the parent element, in this case, the body. You need to use proportional spacing for all the divs, or use absolute spacing for all the divs. It makes it much harder to control them when you mix the two. Or, you could use some neato-keen Javascript-fu to get the height of the client window and adjust the size of the content div accordingly. Then use the overflow property to add the scrollbar. That's personally what I would do, though I'm sure ohters would disagree.
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.
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 .
.
Bookmarks