Buat div tetap di bagian bawah konten halaman sepanjang waktu bahkan ketika ada scrollbar

262

Silahkan lihat di link itu, saya ingin sebaliknya: Ketika konten meluap ke scrollbars, saya ingin footer saya untuk selalu di lengkap bawah halaman, seperti Stack Overflow.

Saya memiliki div dengan id="footer"dan CSS ini:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

Tapi yang dilakukannya hanyalah pergi ke bagian bawah viewport, dan tetap di sana bahkan jika Anda menggulir ke bawah, sehingga tidak lagi di bagian bawah.

Gambar: Examlple

Maaf jika tidak diklarifikasi, saya tidak ingin itu diperbaiki, hanya untuk itu berada di bagian bawah sebenarnya dari semua konten.

css positioning css-position footer H Bellamy
sumber

1

coba position:fixed, meskipun itu tidak akan persis cara terbaik untuk melakukannya

redDevil

Coba posisi: relatif di tubuh.

1

Anda tidak menutup Anda; setelah posisi: absolut. itu akan bekerja dengan sempurna jika tidak!

AlexHighHigh

546

Inilah tepatnya yang position: fixeddirancang untuk:

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

Ini biola: http://jsfiddle.net/uw8f9/

Joseph Silber
sumber

65

Solusi itu tidak baik untuk 90% kasus. jika Anda mengubah ukuran jendela Anda, footer Anda akan menampilkan konten lain dan tidak akan berhenti tepat di akhir konten Anda

vsync

10

@ aroth itu karena mereka adalah dua solusi yang sama sekali berbeda. Solusi ini akan menjaga footer di bagian bawah area visual layar setiap saat. Solusi alternatif menjaga footer di bagian bawah layar atau bagian bawah halaman, tergantung mana yang lebih besar - yang diminta oleh penanya.

Kepalaku Sakit

6

@ MyHeadHurts - Anda memang benar. Setelah menjawab, saya menyadari bahwa ini bukan yang diinginkan OP, tetapi saya meninggalkannya di sini untuk orang yang mencari footer tetap sederhana. Dari komentar (dan suara) tampaknya banyak orang berjuang dengan fitur CSS dasar ini.

Joseph Silber

1

@ MyHeadHurts - Cukup adil, meskipun untuk uang saya keduanya pada dasarnya masih sama. Konten bergulir di bawah fixedfooter, ketika ada cukup konten untuk melakukannya. Itu cukup baik untukku. Tentu saja, saya dapat melihat bagaimana footer yang sangat besar seperti apa yang mereka miliki di stackoverflow tidak akan bekerja dengan baik dengan fixedpendekatan tersebut, tetapi untuk footer satu baris dasar pendekatan ini bekerja dengan baik menurut saya.

Agustus

@aroth Saya setuju, ini adalah solusi yang bagus dan semuanya tergantung apa yang Anda inginkan. Saya hanya menunjukkan mengapa satu solusi lebih rumit dari yang lain -> mereka tidak melakukan hal yang sama.

Kepalaku Sakit

188

Sayangnya Anda tidak dapat melakukan ini tanpa menambahkan sedikit HTML tambahan dan mengandalkan CSS.

HTML

Pertama, Anda perlu membungkus Anda header, footerdan #bodymenjadi #holderdiv:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Kemudian atur height: 100%ke htmldan body(badan aktual, bukan #bodydiv Anda ) untuk memastikan Anda dapat mengatur tinggi minimum sebagai persentase pada elemen anak.

Sekarang mengatur min-height: 100%pada #holderdiv sehingga memenuhi isi layar dan gunakan position: absoluteuntuk duduk footer di bagian bawah #holderdiv.

Sayangnya, Anda harus menerapkan padding-bottomke #bodydiv yang tingginya sama dengan footeruntuk memastikan bahwa footertidak duduk di atas konten apa pun:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

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

Contoh kerja, tubuh pendek: http://jsfiddle.net/ELUGc/

Contoh kerja, tubuh panjang: http://jsfiddle.net/ELUGc/1/

Kepala saya sakit
sumber

saya tidak mengerti mengapa lebar: 100%; diperlukan

Somnath Kharat

4

@sTACKoVERFLOW - Jika Anda tidak menentukan width atau keduanya left dan rightkemudian nilai-nilai diatur ke autodan elemen akan membungkus agar sesuai dengan kontennya. Menentukan width: 100% atau left: 0 dan right:0memastikan bahwa elemen benar-benar diposisikan mengambil lebar penuh dari elemen kontainer

My Head Setia

Saya mencari perilaku yang serupa, tetapi dalam kasus saya, #body div mengambang, dengan mengatakan "float: left". Contoh tubuh pendek bekerja, tetapi contoh tubuh panjang tidak. Ada saran bagaimana saya bisa mendapatkan perilaku yang diinginkan menggunakan float di #body div.

Jatin

@Ian berkata, dalam sebuah jawaban karena dia tidak memiliki cukup perwakilan untuk berkomentar: Jika Anda mengalami masalah di asp.net dengan jawaban dari 'My Head Hurts' - Anda perlu menambahkan 'tinggi: 100%' ke utama tag FORM yang dihasilkan serta tag HTML dan BODY agar ini berfungsi.

msouth

Jika Anda mencoba untuk mendapatkan ini untuk bekerja di dalam div daripada di dalam seluruh tubuh, pastikan Anda menentukan height=100%pada semua elemen yang mengandung Anda, termasuk <form>elemen.

Ben Caine

13

Hanya bekerja untuk solusi lain seperti contoh di atas memiliki bug (kesalahan tempat) untuk saya. Variasi dari jawaban yang dipilih.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

untuk tata letak html

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Nah cara ini tidak mendukung browser lama namun itu dapat diterima untuk browser lama untuk scrolldown 30px untuk melihat catatan kaki

plunker

Anonim
sumber

5

Saya menyadari itu mengatakan tidak menggunakan ini untuk 'menanggapi jawaban lain' tapi sayangnya saya tidak punya cukup tenaga untuk menambahkan komentar ke jawaban yang sesuai (!) Tapi ...

Jika Anda mengalami masalah di asp.net dengan jawaban dari 'My Head Hurts' - Anda perlu menambahkan 'tinggi: 100%' ke tag FORM yang dihasilkan utama serta tag HTML dan BODY agar ini berfungsi.

Ian
sumber

4

Anda tidak menutup Anda; setelah posisi: absolut. Kalau tidak, kode Anda di atas akan bekerja dengan sempurna!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

AlexHighHigh
sumber

3

Saya akan berkomentar jika saya bisa, tetapi saya belum memiliki izin, jadi saya akan memposting petunjuk sebagai jawaban, untuk perilaku tak terduga pada beberapa perangkat android:

Posisi: Tetap hanya berfungsi di Android 2.1 hingga 2.3 dengan menggunakan tag meta berikut:

<meta name="viewport" content="width=device-width, user-scalable=no">.

lihat http://caniuse.com/#search=position

Tarciso Junior
sumber

2

Ini adalah solusi intuitif menggunakan perintah viewport yang hanya mengatur tinggi minimum ke tinggi viewport dikurangi tinggi footer.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

Obromio
sumber

1

Saya telah memecahkan masalah serupa dengan meletakkan semua konten utama saya di dalam tag div tambahan (id = "luar"). Saya kemudian memindahkan tag div dengan id = "footer" di luar tag div "luar" terakhir ini. Saya telah menggunakan CSS untuk menentukan tinggi "luar" dan menentukan lebar dan tinggi "footer". Saya juga menggunakan CSS untuk menentukan margin-kiri dan margin-kanan "footer" sebagai otomatis. Hasilnya adalah bahwa footer duduk dengan kuat di bagian bawah halaman saya dan menggulir halaman juga (walaupun, itu masih muncul di dalam div "luar", tetapi dengan senang hati di luar div "konten" utama. Yang tampak aneh, tapi itu di mana saya menginginkannya).

David B
sumber

1

Saya hanya ingin menambahkan - sebagian besar jawaban lain bekerja dengan baik untuk saya; namun, butuh waktu lama untuk membuatnya bekerja!

Ini karena pengaturan height: 100%hanya mengambil tinggi div orangtua!

Jadi jika seluruh html Anda (di dalam tubuh) terlihat seperti berikut:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Maka yang berikut ini akan baik-baik saja:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

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

... sebagai "pemegang" akan mengambil tinggi itu langsung dari "tubuh".

Kudos to My Head Hurts, yang jawabannya adalah aku akhirnya mulai bekerja!

Namun. Jika html Anda lebih bersarang (karena itu hanya elemen dari halaman penuh, atau itu dalam kolom tertentu, dll) maka Anda perlu memastikan setiap elemen yang mengandung juga telah height: 100%ditetapkan pada div. Kalau tidak, informasi tentang ketinggian akan hilang antara "tubuh" dan "pemegang".

Misalnya yang berikut, di mana saya telah menambahkan kelas "tinggi penuh" ke setiap div untuk memastikan ketinggiannya turun ke elemen header / body / footer kami:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

Dan ingat untuk mengatur ketinggian pada kelas tinggi penuh di css:

#full-height{
    height: 100%;
}

Itu memperbaiki masalah saya!

Tim L
sumber

0

jika Anda memiliki footer tinggi tetap (misalnya 712px) Anda dapat melakukan ini dengan js seperti:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

George Carlin
sumber

0

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

Praveen Kundu
sumber

Tolong jelaskan dalam jawaban Anda, apa masalahnya, dan bagaimana cuplikan ini akan menyelesaikannya, untuk membantu orang lain memahami jawaban ini

FZ

-2

gunakan kelas bootstrap tetap-bawah

<div id="footer" class="fixed-bottom w-100">

Gowtham Sooryaraj
sumber

Tidak ada indikasi OP menggunakan Bootstrap.

TylerH

Buat div tetap di bagian bawah konten halaman sepanjang waktu bahkan ketika ada scrollbar

Jawaban: