Sayfanın Altına Yapışık Alan – (Sticky Footer)

Alta Yapışık AlanBir alanın sayfanın dibine yapışık olarak durması için kullanılan en yaygın yöntem “position:fixed” ya da “position:static” kullanmaktır. Yapıştırdığınız alanın yüksekliği az ise bu da bir yöntemdir tabi. Göze de batmaz.

Ama burada şöyle bir durum var. Bunları kullanarak yapıştırdığınız alan sayfa ne kadar uzun olursa olsun her zaman sayfanın dibine yapışık duracaktır. Peki ya bizim daha büyük bir alana ihtiyacımız olursa ne yapacağız? Ya grafik tasarımını ona göre yapıp sanki sayfanın geri kalanının bir parçasıymış gibi göstereceğiz ya da birazdan anlatacağım yöntemi kullanacağız. Bunun gibi daha birçok yöntem var ama benim kullandığım en iyi yöntem aşağıdaki.

Aslında bu yöntemin genel kullanım amacı; sayfa içeriği az olduğu zaman alt alanın (footer) gelip içeriğe yapışmasını yani alt alanlıktan çıkmasını engellemek.


* {
  margin: 0;
}
html, body {
  height: 100%;
}
.kapsayan {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -80px; /* alt margin altAlan'ın yüksekliğinin eksi değeri olmalıdır. */
}
.icerik {
  padding: 0 0 30px;
}
.altAlan, .itici {
  height: 80px; /* .itici ile .altAlan aynı yükseklikte olmalıdır. */
}

Birinci satırdaki değer tüm margin değerlerini sıfırlamak için kullanıldı. #kapsayan sınıfının içinde birsürü height etiketi göreceksiniz. height: auto !important; ve height: 100%; değerleri IE6’da min-height özelliğini kullanmaya yarıyor.

.icerik sınıfına alttan 30px padding verdim.  Bu da şunu sağlıyor. Evet, güzel, alt alanımızı aşağıya yapıştırdık. İçeriğimiz kısa ise alt alan aşağıya yapışık duracak. Peki ya içerik uzarsa. Bu sefer alt alan yine alta yapışık olacak ama içerik de alt alana yapışacak. Bunu engellemek için bu padding‘i verdim.

<div class="kapsayan">
  <div class="icerik">
     Lorem ipsum dolor sit amet
  </div>
  <div class="itici"></div>
</div>
<div class="altAlan">Lorem ipsum dolor sit amet</div>

.itici sınıfı .altAlan ile aynı yükseklikte olmalıdır. Zaten CSS kodunu takip ederseniz .itici “-80px”lik margin alanını dolduruyor.

Eğer içerik birden fazla kolondan oluşuyorsa aşağıdaki iki yöntemden birini kullanabilirsiniz.

1.si kolonları aşağıdaki stile sahip olan bir element ile sarmak.

.icerik {
  overflow:hidden;
}

2.si sağa ya da sola yaslama özelliğini temizlemek.

.altAlan, .itici {
  clear:both;
}

Tarayıcı Uyumlu

Chrome, Firefox, Safari, IE {IE6 ve üstü} tarayıcılarıyla test edildi. Hepsinde sorunsuz çalışıyor.

İki kolon kullanılmış örneği aşağıdadır.

Örnek

İlgili Bağlantılar

  • temsili

    çok güzel bir çalışma.
    peki bu nu bir css dosyası şeklinde uygulamak istersek nasıl yapmamız gerekeçek.

    • Aslında zaten örnek sayfasındaki “style.css” dosyasında da bu kodlar bulunuyor. Orayı gözden kaçırmışsınız heralde.

  • Echo?

    Çalışma İçin Teşekkürler Örnekleri İndire Bileceğimiz Bir Button Olursa Daha Yararlı Olur.