1. Home
  2. Forums Index
  3. Browser Side / CSS 5:24 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

100% Height Document Template Layout

         

username

5:08 am on Mar 6, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi all, I have been trying to complete a layout that has a 70px header which spans 100% across the screen at the top, has a left bar for secondary nav of 200px width, and fills the remaining vertical space, a right/main div which fills all remaining vertical and horizontal space, which also has a div at the bottom of that div which sticks to the bottom of screen.

If that makes sense, I think I am relatively close, except for a few bugs. The footer and right divs don't fill the horizontal space, and the left and right divs leave 70px beneath the screen base because of the header height. If anyone could find a solution, my code is below. Thanks heaps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css" media="screen">
body {margin:0; padding:0; height:100%;}
#main{position:absolute; left:0; top:0px; padding:0; width:100%; height:100%; color:#333; background:#d1d1d1; margin:0 0 0 0;}
.header{height:70px; background-color:#000033; color:#fff;}
.footer{position:absolute; bottom:0; background-color:#333; color:#FFF; height:50px;}
.left{float:left; width:200px; height:100%; background-color:#ff0000;}
.right{float:left; width:auto; height:100%; background-color:#999;}
</style>
</head>

<body>
<div id="main">
<div class="header">Header</div>
<div class="left">Left</div>
<div class="right">Right
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>

MarkFilipak

2:30 pm on Mar 7, 2010 (gmt 0)

10+ Year Member



You'd be better to work in em, but if you insist on px, here you go. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css" media="screen">
body {margin:0; padding:0; height:100%;}
#main{position:absolute; left:0; top:0; padding:0; width:1000px; height:1000px; color:#333; margin:0;}
.header{position:absolute; left:0; top:0; width:100%; height:7%; background-color:#000033; color:#fff;}
.left{position:absolute; left:0; top:7%; width:20%; height:93%; background-color:#ff0000;}
.right{position:absolute; left:20%; top:7%; width:80%; height:88%; background-color:#999;}
.footer{position:absolute; left:20%; top:95%; width:80%; height:5%; background-color:#333; color:#FFF;}
</style>
</head>

<body>
<div id="main">
<div class="header">Header</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="footer">Footer</div>
</div>
</body>
</html>


--edit--
Oops! Got some of my % wrong. Now it's right.

username

11:03 pm on Mar 7, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Ok, so two final items remain. I need the left element to be a fixed width of 200px, and the header a fixed height of 70px. This unfortunately will not work by simply changing the current values. Also if anyone knows how to disable the vertical scroll bars in Mozilla, that would be handy also. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css" media="screen">
body {margin:0; padding:0; height:100%; width:100%;}
#main{position:absolute; left:0; top:0; padding:0; width:100%; height:100%; color:#333; margin:0;}
.header{position:absolute; left:0; top:0; width:100%; height:7%; background-color:#000033; color:#fff;}
.left{position:absolute; left:0; top:7%; width:20%; height:93%; background-color:#ff0000;}
.right{position:absolute; left:20%; top:7%; width:80%; height:93%; background-color:#999;}
.footer{position:absolute; bottom:0px; width:100%; height:40px; background-color:#333; color:#FFF;}
</style>
</head>

<body scroll="no">

<div id="main">
<div class="header">Header</div>
<div class="left">Left</div>
<div class="right">
<div style="position:absolute; top:0px; bottom:40px; width:100%; overflow-y:auto; background-color:#FFFFFF;">content</div>
<div class="footer">Footer</div>
</div>
</div>

</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:24 pm May 1, 2026