Advanced Search

CSS Sticky Footer

/ Published in: CSS
Save to your folder(s)
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 
  1. html, body, #wrap {height: 100%;}
  2.  
  3. body > #wrap {
  4.     height: auto;
  5.     min-height: 100%;
  6. }
  7.  
  8. #main {padding-bottom: 150px;}  /* Muss genau so hoch sein wie der Footer */
  9.  
  10. #footer {
  11.     position: relative;
  12. 	margin-top: -150px; /* Negativer Wert der Footer-Höhe */
  13. 	height: 150px;
  14. 	clear:both;
  15. }
  16.  
  17. /* optional clearfixhack */
  18.  
  19. .clearfix:after {
  20.     content: ".";
  21. 	display: block;
  22. 	height: 0;
  23. 	clear: both;
  24. 	visibility: hidden;
  25. }
  26. .clearfix {display: inline-block;}
  27.  
  28. /* Bereich nicht für IE-mac Anfang \*/
  29. * html .clearfix {height: 1%;}
  30. .clearfix {display: block;}
  31. /* Bereich nicht für IE-mac Ende */

URL: http://www.cssstickyfooter.com/de/nicht-haftender-footer.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.