Some absolutely positioned elements causes Firefox to extend beyond the screen - html

Question

I’m trying to achieve a specific layout which I’ve tried to show here: http://tmp.grytoyr.net/layout/
Basically I am trying to have multiple absolutely positioned elements with their own scrollbars. The challenge is to get the height of the elements correct, so that the scrollbars look natural. Another requirement is that left and right should always occupy 50% of the main content area.
In Chrome and Safari on Mac it works as expected, but in Firefox the scrollbars for the scrollable elements that have been pushed down by the headers (menu, left, right) extend below the viewport.
I am guessing this is because Firefox interprets height: 100% on an absolutely positioned element with some content above it a little differently than Webkit browsers do.
Is there any way to achieve the desired layout in all modern browsers?
Edit: I’ll answer my own question since I just figured it out.
I had added "box-sizing: border-box" which I thought Firefox supported by now, but it turns out I needed to add "-moz-box-sizing: border-box" too.
Edit2: But be sure to check out the answer by rgthree, since that is a much better way to achieve the layout I wanted.

Answer 1

Yes, you cannot use height of 100% in this case, as that will be the height of the container and you have additional elements/padding/offset that is contributing to your overflow.
For instance, if a container's height is set to 500px, and you have a child content element with a height of 100%, its height will also be 500px. But if you start that child element under another element that is 50px (say, like a header in your example), then the total height is 550px (50px header + 500px "100%" content).
What you can do for your example, since everything is layed out absolutely, is use top/right/bottom/left. Here's the concept:
/* The container -- height/width doesn't matter */
.container {position:relative; height:500px; width:500px;}
/* A 50px tall header -- notice no width is set, but left/right is set to 0 */
.container > .header {
position:absolute;
top:0px;
left:0px;
right:0px;
height:50px;
}
/* The content under the header -- notice no height or width is set */
.container > .content {
position:absolute;
top:50px; /* 50px top to be below the header */
left:0px;
right:0px;
bottom:0px; /* Bottom is 0 so it will stretch the rest of the height */
overflow:auto;
}
Now, just apply this technique to all your nested items and you'll be in business.