Çözüldü HTML'de Footer nasıl sabitlenir?

Stanker · 10 Haziran 2021

Sitede scrollu aşağı yukarı yaparken footerda hareket ediyor. Nasıl sabit yapabilirim?

HTML:

 <footer>

 footer yazıları...

 </footer>

CSS:

footer {
 position: fixed;
 bottom: 0px;
 left: 0px;
 width: 100%;
 height: 50px;
 padding:15px;
 background-color: #000;
 color:khaki;
}

Eray T · 10 Haziran 2021

Position: fixed yaparsan tabii hareket eder.

Stanker · 10 Haziran 2021

Eray T dedi:
Position: fixed yaparsan tabii hareket eder.

Diğer türlü footer alta inmiyor. Footerı nasıl en alta sabitleyebilirim?

Eray T · 10 Haziran 2021

Site tipi vardır.

Header
Body
Footer

Bu şekilde kodlarınızı yazmanız lazım.

Footer kodun her zaman en altında olmalı.

eax · 10 Haziran 2021

Footer’ı en son yazın ve position:fixed yerine relative yazıp ayarlayın. Ya da flexbox ile yapın.

oynozan · 10 Haziran 2021

Stanker dedi:
Diğer türlü footer alta inmiyor. Footerı nasıl en alta sabitleyebilirim?

<body> taginin veya içerisindeki elementlerin belirli yüksekliği olursa en alta iner. Örneğin:

HTML:

<html>
    <body>
        <div>
            <h1>
                Hello world!
            </h1>
        </div>
        <footer>Footer content</footer>
    </body>
</html>

CSS:

body > div {
    height:1000px;
    background-color:purple;
}

footer {
    height:100px;
    background-color:orange;
}

MCV · 2 Temmuz 2021

Hocam merhabalar size daha stabil bir çözümden bahsedeceğim. Bu çözümü Flushing footer to bottom of the page, twitter bootstrap buradaki stackoverflow yanıtından aldım. Burada aslında bootstrapta böyle bir sistem nasıl yapılır onu anlatmış ancak ben bunu size CSS ile nasıl kullanabilirsiniz göstereceğim;

CSS:

/* html ve body etiketimizin yüksekliğini 100% yapıyor yani sayfayı tamamen kaplayacak şekle getiriyor */
html,
body {
 height: 100%
}

body {
 display: flex;
 /* Flex yönünü column yani alt alta getiriyor normalde flex yapısı kullandığınızda yan yana gelir */
 flex-direction: column;
}

.icerik {
 flex-grow: 1;
}

Önizle; https://codepen.io/maxencemaire/pen/VwvyRQB
Flex-grow mesajını çeviremedim anlatabilecek arkadaş olursa çok memnun olurum. İngilizcesi şu şekilde;

Class Flex-grow-1 sets Flex-grow: 1 to our <main>, effectively instructing it to fill any remaining vertical space, thus amounting to the 100% vertical height we set before on our <body> tag.

Çözüldü HTML'de Footer nasıl sabitlenir?

Ayrıntılı düzenleme

Stanker

Hectopat

oynozan

Eray T

Terapat

Stanker

Hectopat

Eray T

Terapat

eax

Hectopat

oynozan

Kilopat

MCV

Hectopat

Dosya Ekleri

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz