21.01.2005, 16:25
|
|||
|
|||
Footer Problem
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>
|
| Sponsored Links |
|
21.01.2005, 16:55
|
|||
|
|||
|
genaugenommen möchtest du also eine Mindesthöhe für den Mainteil die sich dynamisch an die Höhe des Browser-Fensters anpasst ....
soweit ich weiß geht das nicht, zumindest nicht nur mit css
|
| Sponsored Links |
|
21.01.2005, 16:56
|
|||
|
|||
|
Re: Footer Problem
das liegt an der 100% höhe für den wrapper - gute browser halten sich daran, und lassen dann überlangen inhalt über dessen grenzen hinausfließen, die grenzen bleiben aber, und auch die ausrichtung des footers an diesen. du willst also eigentlich min-height für den wrapper auf 100% setzen, nicht height.
das kann dann wieder der IE nicht, aber der interpretiert ja zum glück height:100% wieder derart falsch, dass es für diesen fall "passt". sorge also dafür, dass der IE height:100% für den wrapper bekommt, die anderen browser height:auto und min-height:100% (wie, bleibt dir überlassen: conditional comments, css-hack, etc.) btw: der standard-link zu dieser thematik ist natürlich http://www.alistapart.com/articles/footers, auch mal einen blick wert. edit: ach ja, mikey hat recht, padding nutzt du für wrapper ja auch noch - das muss natürlich raus, sonst passt es mit den 100% nicht mehr ...
|
|
21.01.2005, 17:08
|
|||
|
|||
|
das Einfachste ist doch immer noch, für einen genügend hohen Inhalt zu sorgen, egal ob der Footer immer ganz unten oder halt direkt unterm Hauptinhalt ist, wenns sehr wenig Inhalt ist...wirkts gelinde gesagt sch.. (oder auch automatisch generiert, was für mich aufs selbe hinauskommt)
min-height wird aber nicht von jedem Browser berücksichtigt
|
|
25.01.2005, 11:42
|
|||
|
|||
|
hmm, stimmt. Aber manchmal hat man eben nicht soviel Inhalt.
und wenn ich sowohl height: 100% als auch min-height: 100% eingetragen habe, klappt es im Firefox auch nicht so wie ich will. Ist die Seite länger als der Bildschirm und ich scrolle herunter, ist kein Hintergrund mehr da. Wenn ich nur min-height: 100% nehme, gehts im IE nicht. Alles nicht so einfach
|
|
25.01.2005, 11:46
|
|||
|
|||
|
Zitat:
Zitat:
|
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Kleines Problem mit dem Footer | TheInfection | CSS | 5 | 08.04.2012 18:52 |
| Footer problem | Dav-88 | CSS | 9 | 30.03.2011 06:26 |
| Problem mit bild und footer! | Pumpkin | CSS | 0 | 01.11.2008 22:21 |
| Dynamischer Footer - Problem beim IE6 | iweim | CSS | 0 | 23.02.2008 12:09 |
| Footer Problem | Xevi | CSS | 12 | 17.02.2008 14:48 |
Linear-Darstellung
