Das Gerippe des Quellcode (reduziert auf das Entscheidende) sieht so aus:
<html>
<head>
<title>Stehender Kopf </title>
<style>
* {margin: 0px; padding: 0px;} /* Alle Ränder & Abstände auf Null */
body {background: #006699;}
#block_innen, #kopf, #inhalt { max-width: 960px;}
#kopf-mitte, #inhalt-mitte {max-width: 916px;} /* maxBreite 960 - (2x 22 px) = 916 px */
/* --- Layout-Parameter --- */
#block_max{ text-align: center; position: absolute; width: 100%; height: 100%; }
#block_innen{ height: 100%; margin: 0px auto; }
#kopf {width: 100%; height: 50px; position: fixed; top:0px; /* fixieren am oberen Rand */ background-color: #006699;}
#kopf-links, #kopf-rechts{width: 2%; min-width: 22px; height: 50px; float:left; background-color: #006699;}
#kopf-mitte {background: #FFF; height: 45px; float: left; width:96%; }
#inhalt {width: 100%; height: 100%;}
#inhalt-links, #inhalt-rechts, #inhalt-mitte {height: 100%; margin-top: 50px;} /* Abstand nach oben gleich der Höhe von Kopf */
#inhalt-links, #inhalt-rechts{width: 2%; min-width: 22px; float:left; background-color: #006699; }
#inhalt-mitte {background: #FFF; float: left; width:96%; overflow: hidden; }
</style>
</head>
<body>
<div id="block_max">
<div id="block_innen">
<div id="kopf">
<div id="kopf-links"></div>
<div id="kopf-mitte">
<p>KOPF</p>
</div>
<div id="kopf-rechts"></div>
</div>
<div id="inhalt">
<div id="inhalt-links"></div>
<div id="inhalt-mitte">
<p>INHALT 1</p> <p>INHALT 2</p> <p>INHALT 3</p> <p>INHALT 4</p> <p>INHALT 5</p> <p>INHALT 6</p>
<p>INHALT 7</p> <p>INHALT 8</p> <p>INHALT 9</p> <p>INHALT 10</p> <p>INHALT 11</p> <p>INHALT 12</p>
</div>
<div id="inhalt-rechts"></div>
</div>
</div> <!-- end of block_innen -->
</div> <!-- end of block_max -->
</body>
</html>
Einfach herauskopieren, als .html speichern und mit Safari öffnen. Beim (über)scrollen nach oben reissen #kopf (welcher fixiert ist) und #inhalt hässlich auseinander.
Melde mich später dazu noch mal.
