nicht angemeldet
Guten Tag
Ich möchte mittels CSS:
+--------------------------------------+
| Kopfzeile, 6em hoch, 100% breit |
+--------------------------------------+
| |
| |
| Mittelteil, soll verfügbarer Platz |
| zu 100% ausfüllen! |
| |
| |
+--------------------------------------+
| Fusszeile, 3em hoch, 100% breit |
+--------------------------------------+
Die Fusszeile soll immer am unteren Fensterrand kleben. Auch wenn "Mittelteil" leer ist.
Wenn der "Mittelteil" übervoll ist, soll die Fusszeile nach unten wandern, so dass sie am Schluss, nach dem "Mittelteil" erscheint.
Es dürfen nur Angaben in "em" oder % verwendet werden.
Problem
Das Screenfenster wird grösser als 100% -> Scrollbalken erscheint!
Wie muss ich die Fusszeile einbauen, um dies zu verhindern?
Was bisher geschah
Hab geschnallt, dass:
- html, body müssen im CSS mit "height:100%" definiert sein.
- Die "Fusszeile" muss relativ zum "Mittelteil" positioniert sein.
Und noch etwas Qeullcode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="DE">
<head>
<title>Drei Zeilen Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body{height:100%; width:100%;}
body
{
padding:0;
margin:0;
background:#CCFF00;
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
</style>
</head>
<body>
<div id="header" style="position:absolute; top:0px; left:0px; height:6em; width:100%; background-color:#339900;">
Das ist der Kopf
</div>
<div style="background-color:red; height:100%; ">
<div style="padding-top:6em;">Das ist der Mittelteil</div>
</div>
<div style="width:100%; height:3em; position:relative; top:-3em; background-color:yellow; clear:both;">
Fusseli
</div>
</body>
</html>