The Left and Right Columns are assigned height values of 85% of the active
Viewport's 100% height.
#left {
position:absolute;
left:0;
top:0;
padding:0;
width:13em;
height:85%;
color:#333;
background:#eaeaea;
border:1px solid #333;}
#footer {
position:relative;
margin-right:0;
margin-left:0;
color:#4682b4;
background:#f0f8ff;
border:1px solid #006;
padding:10px;
height:40px;
text-align:center;}
CSS 100% Body Height 3-Column w/Footer
The Center Column is part of the normal page flow with left and right margins assigned to clear the left and
right columns. The Footer is position:relative; to the Center Column. If the Center Column content exceeds the
height of the viewport, the center column will extend to the required height. The Left and Right Columns however
will not increase in height (independent of content), instead, they will continue to render the 85% height (of
viewport!) assigned by the CSS declaration.
.content {
margin-left:13.5em;
margin-right:13.5em;
margin-bottom:20px;
height:85%;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;}
To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top using
margin-top:20; is applied to the first paragraph of each outer divs.
#right {
position:absolute;
right:0;
top:0;
padding:0;
width:13em;
height:85%;
color:#333;
background:#eaeaea;
border:1px solid #333;}
#left p, #right p {
padding:0 10px;}
p.top {
margin-top:20px;}