/ Published in: CSS
Diese Sticky Footer-Lösung funktioniert in allen wichtigen Browsern, auch in Google Chrome!. Sie funktioniert mit zweispaltigen Float-Layouts und wir erhalten keine Überlappung wie in älteren Lösungen, die man bei Google-Suchen nach sticky footer findet. Außerdem benötigt sie keinen zusätzlichen Platzhalter--Tag.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
html, body, #wrap {height: 100%;} body > #wrap { height: auto; min-height: 100%; } #main {padding-bottom: 150px;} /* Muss genau so hoch sein wie der Footer */ #footer { position: relative; margin-top: -150px; /* Negativer Wert der Footer-Höhe */ height: 150px; clear:both; } /* optional clearfixhack */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Bereich nicht für IE-mac Anfang \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* Bereich nicht für IE-mac Ende */
URL: http://www.cssstickyfooter.com/de/nicht-haftender-footer.html