Bu makale, Kodlama kategorisinde yer almaktadır ve 21 Ağustos 2019 tarihinde yazılmıştır.

Sticky Footer Yapımı

Merhaba arkadaşlar. Bu yazımda size 2 adet basit yöntem ile sticky footer yapımından bahsedeceğim. Başka yöntemler de var, eğer onları da incelemek isterseniz google amcamız yardımınıza hazır.

Websitelerinde gezinirken belki gözünüze çarpmıştır. Eğer sayfa içeriği az ya da hiç olmaması durumunda sayfanın alt kısmı yukarı doğru kaymaktadır. Bu durumu sorun olarak algılamamak gerekir, sadece istenmeyen bir durumdur. Bu olayı çözmek adına çeşitli arkadaşlar kendilerince bir yöntem bulup uygulamışlardır. Piyasada çeşitli yöntemler vardır fakat çok kodlamadan kaçınan insanlar olduğumuz için 2 adet basit ve kullanışlı sticky footer yapımından bahsedeceğim.

Bunlardan birincisi bootstrap sticky footer, diğeri ise calc() kodunu kullanarak sticky footer yapımı.

 

1. Bootstrap Sticky Footer

Bu yöntem için sayfanıza bootstrap dosyalarını include etmeniz gerekiyor. Sonrasını bootstrap a bırakmanız yeterlidir. Yapmanız gereken sadece aşağıdaki kodu eklemenizdir.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="col-md-4 pull-left">
        <div class="navbar-text pull">
            <p>Bla Bla Design 2019</p>
        </div>
    </div>
</div>

 

2. calc() Kullanarak Sticky Footer

Bu yöntem de basit ve kullanışlıdır. Bu yöntem için ise html sayfanıza ve css dosyanıza aşağıdaki kodları eklemeniz gerekmektedir.

HTML

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

CSS

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

 

Bu yöntemlerin dışında çeşitli yöntemler bulunmaktadır. Onları da incelemenizi tavsiye eder ve iyi günler dilerim.