Memperbaiki footer di Bootstrap

87

Saya mencoba Bootstrap dan saya bertanya-tanya, bagaimana saya bisa memperbaiki footer di bagian bawah tanpa membuatnya menghilang dari halaman jika konten di-scroll?

html css twitter-bootstrap footer stdcerr.dll
sumber

Jawaban:

215

Untuk mendapatkan footer yang menempel di bagian bawah viewport Anda, berikan posisi tetap seperti ini:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap menyertakan CSS ini di Navbar> bagian Penempatan dengan kelas fixed-bottom. Cukup tambahkan kelas ini ke elemen footer Anda:

<footer class="fixed-bottom">

Dokumentasi bootstrap: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Josh KG
sumber
Ini dan komentar @ Daniel-Tero berhasil untuk saya.
jmng
4
Jika halaman memiliki scrolling, itu tidak berfungsi dengan benar.
Arnab
2
fixed-bottomtidak melakukan apa yang saya harapkan, saya lakukan sebagai gantinya static-bottomuntuk menghormati tinggi konten halaman.
Gjaa
8

Tambahkan ini:

<div class="footer fixed-bottom">
Matheus Gomes
sumber
3

Tambahkan z-index:-9999;ke metode ini, atau ini akan menutupi bilah atas Anda jika Anda punya 1.

Daniel Tero
sumber
0

Anda dapat melakukan ini dengan membungkus konten halaman dalam div dengan gaya id berikut diterapkan:

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<div id="wrap">
    <!-- Your page content here... -->
</div>

Bekerja untuk saya.

Tuan Landak
sumber
-4

Anda mungkin ingin memeriksa contoh itu: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Vladimir Dimchev
sumber
2
Itu untuk footer tempel, bukan footer tetap: /
az_
@aaronz apa bedanya?
Arsen Ibragimov
4
@ArsenIbragimov Footer tempel didorong ke bawah ke akhir halaman jika konten lebih tinggi dari tampilan. Footer tetap selalu terlihat di bagian bawah tampilan.
az_