www.s7u.co.uk - Cutting Edge CSS

Back to Basics II

The bare essentials of the Fixed Layout version 2

This is the alternative method of having a scrolling content area with fixed header and footer.

March 29th 2005 - Now with anchors - see bottom of page content.

This one has a full height scroll bar, works the same in all browsers and does not require IE to be in quirks mode.

CSS - the html tag:

html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
font-size:80%; /*set default font size */
font-family:"trebuchet ms", tahoma, verdana, arial, sans-serif; /* set default font */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}

CSS - the body tag:

body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:hidden; /*get rid of scroll bars in IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
}

This now gives a html / body size of 100% x 100% with no scroll bars on which we can place a header and footer using position absolute in the normal way. The header and footer will stay fixed because the body cannot scroll.

OK. now to tackle the content which must appear below the header, above the footer and scroll on overflow. In this example ALL browsers work the same way.

The #content div is set up as follows:

#content {
display:block; /* set up as a block */
height:100%; /* set height to full page */
max-height:100%;
overflow:auto; /* add scroll bars as required */
padding-left:200px; /* pad left to avoid navigation div if required */
position:relative; /* set up relative positioning so that z-index will work */
z-index:3; /* allocate a suitable z-index */
}

This now gives you a full height content div. BUT we need to avoid the header and footer when first viewed. So we add top and bottom 'padding'.
If we literally added padding-top and padding-bottom then the vertical scroll bar will move down the screen so instead we add a padding div at the top and bottom of our content.

.pad2 {
display:block;
height:100px; /* height to miss header and footer */
}

You can now add the header and footer using position:absolute; with a suitable z-index such that it appears over the content div. When the content is scrolled it will disappear under the header / footer.

BUT note that the header and footer will need to be positioned right:18px; to avoid covering the scroll bar. This will make the header and footer overhang the left of the screen by 18px so you may need a 'pad' of 18px to bring header and footer back on screen.

© 2004/5/6 Stuart Nicholls

Works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox

NN7 displays correctly but an absolutely positioned div in the content area stays 'fixed' as the content scrolls.

Your comments
Top
CSS - the body tag

Copyright ©2004-2008 Stu Nicholls