CSS Sticky Footer

Footer bir blog için belki de en önemli bölümlerden birisi, çoğu tasarımda yalnızca telif hakkı bilgisi yer alan footer kısmını, aslında daha verimli de kullanabilirsiniz. Oraya hakkınızda bilgi, son yazılar, son yorumlar gibi istediğiniz şeyleri eklemeniz mümkün. CSS Sticky Footer denilen olay da bu zaten. Footer’ı sayfanın en altına sabitliyoruz.

Aslında Google’da bir arama yaptığınızda onlarca anlatım mevcut fakat şu kaynakta bulduğum anlatım en iyisi, daha doğrusu en iyi çalışan ve yapımı kolay olan bir yöntem.

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="style.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Website içeriğiniz...</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2011...</p>
        </div>
    </body>
</html>

İşte bu kodları kendi tasarımınıza göre uyarladığınızda, pozitif bir sonuç vermesi gerekli. Canlı bir örneğine şuradan ulaşabilirsiniz.

Kaynak/Daha ayrıntılı bilgi: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/