<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0050)http://www.pmob.co.uk/temp/fixedlayoutexample5.htm --> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Fixed header and footer for IE</TITLE> <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type> <STYLE type=text/css>BODY { MARGIN: 0px } HTML { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px } BODY { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px } * HTML { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px } * HTML BODY { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px } * HTML #outer { HEIGHT: 99.9%; OVERFLOW: auto; voice-family: inherit } * HTML #contain-all { Z-INDEX: 1; POSITION: absolute; OVERFLOW-Y: scroll; WIDTH: 100%; HEIGHT: 100% } #top-bar { Z-INDEX: 999; POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; HEIGHT: 50px; OVERFLOW: hidden; TOP: 0px; PADDING-TOP: 0px; LEFT: 0px } #topbar-inner { BACKGROUND: red; HEIGHT: 50px } #footer-inner { BACKGROUND: red; HEIGHT: 50px } * HTML #topbar-inner { MARGIN-RIGHT: 17px } * HTML #footer-inner { MARGIN-RIGHT: 17px } #footer { Z-INDEX: 999; POSITION: absolute; WIDTH: 100%; BOTTOM: 0px; HEIGHT: 50px } .spacer { HEIGHT: 50px } P { MARGIN-TOP: 0px } HTML > BODY #top-bar { POSITION: fixed } HTML > BODY #footer { POSITION: fixed } </STYLE> <META name=GENERATOR content="MSHTML 8.00.7600.16490"></HEAD> <BODY> <DIV id=outer> <DIV id=contain-all> <DIV is an experimental layout and untested in a real situation but preliminary results look good.</P> <P>The header and footer need to be a fixed height and are therefore not suited to large amounts of fluid content.</P> <P>The code comments for ie are documented below as they needed to be removed from the code for ie mac</P> <P>* html, * html body{<BR>overflow:hidden;/* remove scroll mechanism from body*/<BR>padding:50px 0;/* for ie5 and 5.5.*/<BR>margin:-50px 0;<BR>padding:0;<BR>margin:0;<BR>}</P> <P>* html #outer { <BR>overflow:auto;/* this is basically the root element now*/<BR>height:100%;<BR>/* we need to make ie5 jump the next style block ( contain-all) so we use the voice hack*/<BR>voice-family: ""}""; voice-family:inherit; <BR>}<BR>* html #contain-all{/* must contain all content except for top and bottom bars - ie5 doesnt want this so jumps it as mentioned above*/<BR>position:absolute;/* due to a bug in ie6 where children of elements that have overflow defined behave as those they are fixed*/<BR>overflow-y:scroll;<BR>100%;<BR>height:100%;<BR>z-index:1;<BR>}<BR></P> <P> </P> <P>some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>some text to cause scrolling : </P> <P>Last bit of text</P> <DIV id=top-bar> <DIV id=topbar-inner>Fixed Top & bottom- Demo works in IE5 IE5.5. and ie6 - Firefox 1.0+, Mozilla 1.3+, NN 6.2, Opera 6.03 7.2 7.5,8 : (Mac OS X 10.4 - FireFox 1.5.0.1, Safari 2.0.3 (417.8), IE 5.2 (5.2.3 (5815.1)) </DIV></DIV> <DIV id=footer> <DIV id=footer-inner>Fixed footer </DIV></DIV></BODY></HTML>