Fixed (Sabit) Footer

Geçenlerde bir proje için sabit footer kullanmam gerekiyordu. Kodlarını incelediğim sitelerin çoğunda sabit footer,  sidebarın uzun tutulmasıyla ya da minumum-height verilerek elde edilmişti.  Sitenin içeriğini temizlediğimde footer yukarı çıkıyordu yani footer aslında sabit olarak durmuyordu. Sabit durmasını sağladığım footerlar ise pencere boyutunu büyütüp küçültme testi yaparken üstteki içeriğin üstüne çıkıyordu, altında kayboluyordu vs.

Ben o sorunuma uzun zaman harcayıp biraz karışık bir çözüm üretmişken, bugün gördüğüm Soh Tanaka‘nın yazdığı çok basit ve temiz kodu paylaşmak istedim.

HTML

<div class="headwrap">
	<!--İçerik burada yer alıyor-->
        <div class="container"></div>
</div>

CSS

Footer alanını body’nin arkaplan resmi olarak belirliyoruz, bunu bottom’da sabit (fixed) konuma getiriyoruz.

body {
	margin: 0;
	padding: 0;
	background: #005094 url(footer_bg.jpg) fixed repeat-x left bottom;
	width: 100%;
	min-width:970px;/*--IE7 Background sorununu çözmek için kullanıyoruz--*/
}

Header’ımızı  arkaplanıyla birlite ekliyoruz.

.headwrap {
	background: url(body_bg.jpg) no-repeat center top;
	height: 189px;
	float: left;
	width: 100%;
	display: table;
}

Demo

Kaynak: Soh Tanaka