Hallo,
Die könnten halt nicht position fixed, oder wie? Und dass der Inhalt dabei lesbar bleibt (padding/margin) muss ja auch sein...;
Genau - nutze einfach position: fixed und jeder Browser der das nicht kann wird mit normalem Textfluss gefüttert.
Das betrifft den Internet Explorer 6 und Geräte die mit Panning arbeiten und nicht scrollen (z.B. Tablets und Mobiltelefone) - auf denen wäre fixed ohnehin ein Hindernis, wenn man es nicht ordentlich macht.
Also so wie es im Artikel steht. Bzw. kann ich dann nicht nur die IE-Hacks weg lassen sondern auch die zustäzlichen header/footer_container.
Also:
<html>
<head>
<title>header footer test</title>
<style type="text/css">
[code lang=css]
body
{
position:absolute;
}
html, body
{
top:0; left:0; right:0;
min-height:100%;
width:100%;
margin:0;
padding:0;
}
#header
{
position:fixed;
top:0; left:0; right:0;
height:3em;
z-index:3;
background-color:green;
}
#menu
{
position:fixed;
top:4em;
left:.5em;
width:9em;
border:1px solid red;
background-color:red;
}
#content
{
margin:0;
padding-top:4.85em;
padding-left:12em;
padding-bottom:3em;
z-index:2;
background-color:yellow;
}
#footer
{
position:fixed;
bottom:0; left:0; right:0;
margin:0;
height:2em;
z-index:3;
background-color:green;
}
</style>
</head>
<body>
<div id="header">
header
</div>
<div id="menu">
<ul><li>menu</li><li>menu</li><li>menu</li><li>menu</li><li>menu</li><li>menu</li><li>menu</li></ul>
</div>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
[/code]
Gruß
jobo