Daha önce bu konuda bir yazı yazmıştım. Sayfa Dibine Yapışık Alt Alanlar (Sticky Footer) Yazının tarihi 2009. Flex ile bu işin daha kolay yapıldığını daha önce görmüştüm ama bir türlü zaman ayırıp bir yazı yazamamıştım. Nasip şimdiyeymiş.

sticky footer

2009’daki yazıyı incelerseniz kodlar biraz hack içeriyor. Flex ise bu konuya basit bir şekilde çözüm üretiyor. Dün yazdığım yazıdaki çözüm ile bir çözüm oluşturuyoruz. margin-top: auto güzel bir kullanım.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin: auto 0 0 0;
}

Bu kadarcık kod işimizi gördü.

Bir başka çözüm de içerik alanının alt alan kadar uzayan bir ardalan rengi istiyorsak.

Koddaki fark alt alandaki margin değerini kaldırıp içerik alanına flex tanımı yapmamız.

main {
  flex: 1 0 auto;
}

Yerine göre kullanım tercihi edebilirsiniz.

Kalın sağlıcakla.

Kaynaklar

HTML5 Spellcheck özniteliği

HTML5 Spellcheck özniteliği ile tarayıcı dil hatalarını açıp kapaya biliyoruz Devamını oku

jQuery closest yerine closest() metodunu kullanalım

29 September 2018 tarihinde yayınlandı.