CSS Flex ile Sticky Footer Yapmak

3 yorum

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.

Yorumlar (3)

mcan demiş ki;

Emeğine sağlık..

Kemal demiş ki;

tek kelimeyle adamsın

Mehmet Konukcu demiş ki;

Eline sağlık abi. Güzel anlatım.

Yorum Gönder