ich habe ein kleines Problem zu dem es millionen von Google-Treffern gibt, die ersten 100 taugen jedenfalls nichts.
Ich habe einen Footer den ich mit wie folgt unter den unteren Bildschirmrand hefte:
Funktioniert auch wunderbar wenn der Content kurz genug ist und für diesen alleine nicht gescrollt werden muss.
Doch hat der Besucher nun eine kleinere Auflösung die schon beim Content scrollen verlangt so hängt der Footer mitten im Bild.
Ich möchte kein JavaScript verwenden dass erst die Auflösung des Besuchers ausließt, davon halte ich nichts. Würde mich freuen wenn es eine unabhängige Lösung gibt und nicht der Content mit 100% Höhe gekennzeichnet werden muss da dies bei mir nicht so einfach möglich ist.
Sticky Footer at Bottom
* {/* for demo only*/
margin:0;
padding:0
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
#outer {
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
text-align:left;
}
* html #outer {
height:100%
}
#header {
background:red;
border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
background:red;
width:760px;
margin:auto;
height:40px;/* must match negative margin of #outer */
clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1, h2, p {
padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
