Posted By

gabbo on 06/25/10


Tagged

footer sticky Bottomfooter


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

DesignByWilliam
wirenaught


CSS Sticky Footer


 / Published in: CSS
 

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

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.

  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 */

Report this snippet  

You need to login to post a comment.