Tutorial 24: Fixing Frames with Fixed Positioning
|
| ||||
| ||||
|
|
Using the overflow Property
For the header and footer, this is not a concern; they're going to fit on one line in even the slimmest of windows and we'd like to keep it that way. The sidebar and the main window, however, are a different concern. In order to allow the browser to offer a scrolling mechanism for these two sections, we need to use the CSS overflow property.
The overflow property indicates what should be done when the contents of an element don't fit inside its box. This property isn't useful for most elements because, normally, an element's box will be big enough to contain all of its contents. In this case, however, we have constrained the size of the box, which now depends on the size of the viewport, not its contents. If the viewport is small enough, the contents won't fit inside the box.
In this case, you can use the overflow property to offer one of four solutions: If you use the visible value, the user agent will show the contents even if they are outside the element's box. This can be nasty as they might appear overlayed with other elements or disappear off the edge of the viewport. If you use the hidden value, the browser will only display any contents it can fit inside the box, and hide the rest. Once again, this won't do in our situation. If you use the scroll value, the user agent will offer scroll bars in both horizontal and vertical directions so that the reader can scroll around the element's contents, turning the element's box into a mini-viewport of sorts. This is a solution, however we don't want the scrollbars taking up space when they're not needed (i.e. when the box is big enough for the contents). This leaves us with the auto value, which only displays scrollbars if they are needed. So, let's set the overflow property to auto for the introduction and news sections:
#navigation { position: fixed; top: 0; left: 0; right: 0; height: 1.4em; border-bottom: 0.2em solid #ACA250; } #intro { position: fixed; top: 1.6em; left: 0; bottom: 1.4em; right: 75%; padding: 0 0.5em; border-right: 0.2em solid #ACA250; overflow: auto; } #news { position: fixed; top: 1.6em; left: 25%; bottom: 1.4em; right: 0; overflow: auto; padding: 0 0.5em; } #copyright { position: fixed; left: 0; bottom: 0; right: 0; height: 1.2em; border-top: 0.2em solid #ACA250; }
