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:

header

içerik

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.

//assets.codepen.io/assets/embed/ei.js