Hemen hemen tüm geliştiricilerin kariyerlerinde en az bir kere karşılaştığı sorunlardan birisi de, içeriği az olan sayfalarda footer’ın en aşağıda yer almaması olsa gerek. Aslında, footerın yüksekliği bilindiği taktirde bunun bi’ çözümü vardı.

Flexbox, işte tam bu noktada yardımımıza koşuyor. Genellikle internette yatay pozisyonlamalar için kullanılsa da dikey yönlü çözümlerle de öne çıkıyor.Yapacağınız tek şey de, içeriği tek bir element içerisine aldıktan sonra gerisini flexbox‘a bırakmak olacaktır.

HTML tarafı için:

<body class="webpage">
  <header>header</header>
  <main class="webpage-content">içerik</main>
  <footer>footer</footer>
</body>

CSS tarafı için:

.webpage {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.webpage-content {
  flex: 1;
}

Canlı örnek için:

See the Pen OPOLxr by Ibrahim Nergiz (@phyesix) on CodePen.

Yorum Gönderin

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

Bu site reCAPTCHA ve Google tarafından korunmaktadır Gizlilik Politikası ve Kullanım Şartları uygula.