CSS Sabit Footer yapısı

Siteniz için footer tasarlıyorsunuz ancak sayfanın yüksekliği ekran yüksekliğinden az ise bu footer arkadaş ekranın ortasına gelecek kadar yukarı çıkıyor. İşte onu sayfanın en aşağısına, sayfa ekrandan daha az yükseklikte ise sayfanın en altında kalacak şekilde ayarlamayı şöyle yapabilirsiniz.

CSS kodlarının arasına:


html {
    position: relative;
    min-height: 100%;
}

body{
    margin-bottom: 180px; /* footer yüksekliğinden fazla olması gerekir. */
}

.footer{
    position: absolute;
    left: 0;
    bottom: 0;
    min-height: 150px; /* değişebilir */
    width: 100%;
    overflow:hidden;
}

Bunları ekledikten sonra footer kısmına footer classını eklememiz yeterli olacaktır.

Kaynak: https://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir