Hallo zusammen,
habe folgendes Problem. Ich habe eine Seite mit Header, Mainteil und Footer. Header und Mainteil passen. Den Footer habe ich versucht mit position:absolute; bottom: 0px; an das untere Ende der Seite zu platzieren.
Das klappt auch so einigermaßen.
Wenn aber der Mainteil länger als die Seite ist, wird der Footer nicht mehr am Ende der Seite patziert, sondern immer noch am Ende des Bildschirmes. Also der Footer steht mitten im Mainteil.
Es soll allerdings auch so sein, dass wenn der Mainteil nicht den ganzen Bildschirm benötigt, trotzdem der Footer am Ende des Bildschirmes sein soll.
hier ist der Html und css code.
Vielen Dank für die Hilfe
Code:
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
html, body{
height: 100%;
margin:0px;
padding:0px;
}
body {
background-image: url(images/hg.gif);
text-align: center;
}
#wrapper {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #7A7572;
width: 735px;
height: 100%;
background-color:#FFFFFF;
margin: auto;
padding: 6px;
}
/************ HEADER ************/
#header {
position: absolute;
height:42px;
width: 735px;
text-align: right;
padding-top: 14px;
overflow: hidden;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/************ PAGEBODY ************/
#pagebody {
width:735px;
text-align: left;
}
/************ FOOTER ************/
#footer{
height: 30px;
width:742px;
position:absolute;
bottom: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">### HEADER ### ### HEADER ### ### HEADER ### ### HEADER ### ### HEADER ### ### HEADER ### </div>
<div id="pagebody">
<div id="maincontent">
Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte.
Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte.
Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte.
Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte.
Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte.
Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte.
Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte.
Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. </p>
Und hier ist nochmal ein Text. Aber der Footer soll darunter sein, nicht darüber!</div>
</div>
<div id="footer">### FOOTER ### ### FOOTER ### ### FOOTER ### ### FOOTER ### ### FOOTER ### ### FOOTER ### </div>
</div>
</body>
</html>