I've been wanting to build multi-pane layouts that don't rely on
<frameset>, but could still feature a fixed-height header.
That's what this page does. If you have Developer Toolbar for Firefox, hit Ctrl+Shift+S (to disable all styles). This is a single HTML document.
Play with the size of your window to see what this does.
Various reasons (spidering, deep linking, cross-window scripting) that frames are bad. You know the deal.
So, curiosity, mostly.
Seems to work fine in FF2, IE6/7, Opera 9, and Safari 2.
position:absolute - lots of it. The dark grey header, green left pane, and purple right pane, as well as the yellow label elements, are all positioned absolutely, relative to a container
<html> elements are both given
height:100%;, as well as
overflow:hidden; - this prevents default browser scrollbars.
The header is easy - just positioned at the top left, with a fixed height.
The scrollable panes... not as easy. The goal is to have elements that are as tall as the entire
<body>, minus the height of the header or other fixed-height elements.
You have to already have working knowledge of the
position:relative; parent and
position:absolute; child to grasp the following.
position:absolute; left:0px; top:70px;(70 should be replaced with whatever the header's height is).
That's about all that can be done, cross-browser.
Like usual, there are two ways of accomplishing this, the IE Way, and the Everything Else Way.
To provide dimensions to an absolutely positioned box in good browsers, you have three options:
What's up with number 3? How can
Provided that there is no dimension specified for that direction (horizontally, e.g.
width), the presence of two opposing location values will cause the box to be stretched, sort of like clay. The width of the box will be: parent box
left value minus
right value, with outermost left edge located at
left value, and outermost right edge located at
The same is true for the relationship between
height, except vertically instead of horizontally.
For example's sake, the green box has these properties declared:
...and the purple box has these properties:
Up front: there is some syntax hacking here.
IE - including 7 - does not support the specification of both left and right at the same time (nor top and bottom). This means you have to use
But wait - declaring something to be 100% high while positioned some nonzero distance from the top would mean that it would be out of its parent's phsyical boundaries.
Here's where the IE box model comes in handy: specify a
px;, in conjunction with setting the
top value back to 0 for IE. This will shrink the scrollable portion of the box, vertically.
If that border color happens to match the body color, which it does here, then it create the illusion of being as height as
#wrap minus the header height.
Note: The gaps are specified in pixels despite the percentage based
topvalue for the two colored boxes be a few pixels more than the header
height:100%;, an extra
leftvalue for good browsers, and a
paddingspec on the