post_ico2

CSS tips #3 – Sticky Footer

Kodując szablon zapewne wiele osób ma problem ze stopką „wiszącą” tuż pod treścią, gdy jest jej za mało, by stopka obsunęła się na dół. Jak ją „przykleić” do dolnej krawędzi niezależnie od ilości treści? Jest na to kilka sposobów…

]

Metoda Ryana Falta

CSS:

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -100px; // taki jak wysokosc stopki
} 
.footer, .push { 
    height: 100px; // taki jak wysokosc stopki
}
.push{
    clear: both;
}

HTML:

<body> 
    <div class="wrapper"> 
        <p>Treść strony www</p> 
        <div class="push"></div> 
    </div> 
    <div class="footer"> 
        <p>Stopka</p> 
    </div> 
</body>

W metodzie tej musimy ustawić dolny margines dla klasy .wrapper o ujemnej wartości wysokości stopki. Ponadto sposób Ryana Falta wymaga dodania pustego kontenera .push o takiej samej wysokości jak stopka. Wadą tego rozwiązania jest zakaz używania górnych i dolnych marginesów – powodują one błędne określenie wysokości strony.

Metoda Steva Hatchera

CSS:

* {
    margin:0;padding:0;
}  
html, body {
    height: 100%;
} 
#wrap {
    min-height: 100%;
} 
#main {
    overflow:auto; 
    padding-bottom: 180px; // taki jak wysokosc stopki
}
#footer {
    position: relative; 
    margin-top: -180px; // taki jak wysokosc stopki
    height: 180px; 
    clear:both;
}
/*Opera Fix*/ 
body:before {/* thanks to Maleika (Kohoutec)*/ 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/ 
}

HTML:

<div id="wrap"> 
    <div id="main"> 
        Treść 
    </div> 
</div> 
<div id="footer"> 
    Stopka 
</div>

Sposób ten jest podobny do metody Ryana Falta. Tutaj także górne i dolne marginesy powodują błędy. Zaletą tego rozwiązania jest to, że nie musimy tworzyć pustych kontenerów.

Poza powyższymi metodami często stosuję min-height dla głównego kontenera z treścią. Może nie jest to zbyt idealne rozwiązanie, ale w większości przypadków wystarczające ;)

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...
  • Albert221

    A nie dałoby rady position: absolute + bottom ?