CSS Flex ile Sticky Footer Yapmak

Bu dersimde son zamanlarda sıkça kullandığım css’in flex özelliğini kullanarak sticky (yapışkan) footer yapımını göstermek istiyorum. Temel anlamda aslında kodlarım şunlardan ibaret;

<body>
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</body>

<style>
body {
   height: 100%;
   display: flex;
   flex-direction: column;
}
.content {
   flex: 1;
}
</style>

Daha detaylı görmek isterseniz aşağıdaki örneği inceleyebilirsiniz;

See the Pen Sticky footer with CSS Flex – Erbilen.net by Tayfun Erbilen (@tayfunerbilen) on CodePen.

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS Flex ile Sticky Footer Yapmak” üzerine 3 yorum

Bir Cevap Yazın

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