Advanced Search

Return to Snippet

Revision: 27858
at June 25, 2010 07:03 by gabbo
Initial Code 
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 */
Initial URL 
http://www.cssstickyfooter.com/de/nicht-haftender-footer.html
Initial Description 
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-<div>-Tag.
Initial Title 
CSS Sticky Footer
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS