k²bytes - Professional Webdesign - Webdesigns Rosenheim
- 07.Sep.09 -
Voraussetzung für beide Möglichkeiten ist ein DIV mit der Höhe 100%.
Dazu muss das html- und body-Element auf eine Höhe von 100% gesetzt werden. Ebenso müssen margin und padding auf 0 gesetzt werden.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Um den Fußbereich immer unten zu platzieren wird für beide Varianten ein Pagewrapper (page) verwendet, welcher mindestens die Höhe des Fensters hat.
#page {
min-height: 100%
height: auto !important; /* Für IE6 */
height: 100%; /* Für IE6 */
}
Der Fußbereich wird mit einer Höhe von 20px definiert. Da in beiden Varianten der Inhalt unter den Fußbereich angezeigt werden würde, muss für das content-Element ein padding-bottom von 20px definiert werden.
#content {
padding-bottom: 20px;
}
Der Fußbereich wird mit einem negativen margin über das page-DIV geschoben. Dazu müssen page- und footer-DIV in der HTML-Seite untereinander angeordnet werden.
Definition des footer-DIV:
#footer {
height: 20px;
margin: 0;
margin-top: -20px;
}
Die Anordnung in der HTML-Seite:
<div id=“page“> <div id="content"> <!—Inhalt --> </div> </div> <div id=“footer“> </div>
In dieser Variante wird der Fußbereich absolute am unteren Bereich des page-Elements positioniert. Dazu muss dem page-Element die Position „relative" und dem footer-Element die Position „absolute" gegeben werden. Der Fußbereich wird dann in der HTML-Seite innerhalb des page-Elements angegeben.
Page-Element relativ definieren:
#page {
position: relative;
min-height: 100%
height: auto !important; /* Für IE6 */
height: 100%; /* Für IE6 */
padding: 0;
}
Footer „absolute" und mit „bottom: 0" definieren:
#footer {
position: absolute;
bottom: 0;
height: 20px;
margin: 0;
}
Die Anordnung in der HTML-Seite:
<div id=“page“> <div id="content"> <!—Inhalt --> </div> <div id=“footer“> </div> </div>
- 14.May.10 -
Saubere Domain-Umleitung mit Hilfe der htaccess
- 14.Mar.10 -
„Bei Google auf Platz 1“
- 28.Feb.10 -
Webdesign Tipps - Gestaltung des Inhaltes
- 18.Feb.10 -
Suchmaschinenoptimierung – Ehrlichkeit währt am längsten
- 18.Jan.10 -
Tweets Modul für Redaxo
- 18.Dec.09 -
Twitter Mosaik Modul für Redaxo
- 18.Nov.09 -
Wordpress CSS Dropdown Menu Plugin Bug
- 29.Oct.09 -
Typo3 Seitentitel manuell eingebbar, alternativ dynamisch generiert
- 15.Oct.09 -
Interessante Webdesign Blogs
