deluxeondecks
Mitglied
Hallo Leute,
ich habe ein Layout, in dem ein Div (Footer) immer am Ende der Seite positioniert werden soll. Das heißt, ist der Textinhalt nur ein Satz und somit sehr gering, soll das ganze so aussehen:
Ist der Text sehr lang und man muss scrollen soll das Layout folgender Maßen aussehen:
Wie ihr euch denken könnt, geht es um das "foot"-Div. Bisher habe ich folgenden Code:
HTML:
CSS:
Bei kurzem Text funktioniert es bereits. Aber wenn ich langen Text habe und die Seite muss gescrollt werden, bleibt der Footer an dem Punkt stehen, wo die Seite ohne Scrollen zu Ende wäre. Das Foot-Div soll aber am Ende der Seite stehen, auch wenn gescrollt werden muss.
Könnt ihr mir helfen?
ich habe ein Layout, in dem ein Div (Footer) immer am Ende der Seite positioniert werden soll. Das heißt, ist der Textinhalt nur ein Satz und somit sehr gering, soll das ganze so aussehen:
Ist der Text sehr lang und man muss scrollen soll das Layout folgender Maßen aussehen:
Wie ihr euch denken könnt, geht es um das "foot"-Div. Bisher habe ich folgenden Code:
HTML:
Code:
<!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" >
<head></head>
<body>
<div id="wrapper" class="center">
<div id="head"></div>
<div id="main" >
<div id="mainContent" class="clear">
<div id="content">
Text
</div>
</div>
</div>
<div id="foot" ></div>
</div>
</body>
</html>CSS:
Code:
body { margin: 0 auto; background-color: red; }
.clear { clear: both; }
.center { margin: 0 auto; }
#wrapper { height: 100%; min-height: 100%; }
#wrapper #head { width: auto; height: 100px; background-color: yellow; }
#wrapper #main { width: 1000px; height: auto; margin: 0 auto; }
#wrapper #mainContent { height: auto; background-color: green; }
#wrapper #mainContent #content { margin: 0px 40px 10px 45px; height: auto; }
#wrapper #foot { position: absolute; bottom: 0px; height: 30px; width: 100%; background-color: blue; margin: 40px 0 0 0; }Bei kurzem Text funktioniert es bereits. Aber wenn ich langen Text habe und die Seite muss gescrollt werden, bleibt der Footer an dem Punkt stehen, wo die Seite ohne Scrollen zu Ende wäre. Das Foot-Div soll aber am Ende der Seite stehen, auch wenn gescrollt werden muss.
Könnt ihr mir helfen?
