Bootstrap 3 Siram footer ke bawah. tidak tetap

177

Saya menggunakan Bootstrap 3 untuk situs yang saya rancang.

Saya ingin punya catatan kaki seperti ini. Sampel

Harap dicatat bahwa saya tidak menginginkannya TETAP sehingga bootstrap navbar-fix-bottom tidak menyelesaikan masalah saya. Saya hanya ingin selalu ada di bagian bawah konten dan juga responsif.

Panduan apa pun akan sangat dihargai.

EDIT:

Maaf jika saya tidak jelas. Apa yang terjadi sekarang adalah ketika konten tidak memiliki cukup konten. Footer saya bergerak ke atas dan kemudian meninggalkan ruang kosong di bagian bawah.

Ini yang saya miliki sekarang untuk navbar saya

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
html css twitter-bootstrap footer pengguna3169403
sumber
Apakah Anda memiliki kode contoh yang sedang Anda kerjakan yang memberi Anda masalah?
badAdviceGuy
Sepertinya footer biasa, jika Anda tidak ingin Memperbaiki, Anda dapat memperbarui gaya. Masalah apa yang Anda hadapi?
Mutant
Ketika itu adalah hal terakhir dalam HTML Anda, itu akan selalu di bagian bawah. Pertanyaan membingungkan yang membutuhkan contoh kode untuk memahami apa masalahnya.
Joe Conlin
stackoverflow.com/questions/643879/…
davidpauljunior
@davidpauljunior: Itu adalah footer lengket yang bukan apa yang saya cari
user3169403

Jawaban:

124

Lihat contoh di bawah ini. Ini akan memposisikan Footer Anda untuk tetap di bawah jika halaman memiliki lebih sedikit konten dan berperilaku seperti footer normal jika halaman memiliki lebih banyak konten.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

UPDATE : Versi baru Bootstrap menunjukkan cara menambahkan footer lengket tanpa menambahkan pembungkus. Silakan lihat Jawaban Jboy Flaga untuk lebih jelasnya.

Surjith SM
sumber
Tautan Anda rusak
Halter
2
Mengapa ada dua definisi properti tinggi dalam pembungkus?
HardlyNoticeable
@HardlyNoticeable berukuran min-width untuk memaksa pembungkus meskipun kontennya kurang.
Surjith SM
Masih bertanya-tanya mengapa ada dua definisi properti ketinggian. Anda tidak menjawab @SurjithSM
Erowlin
@Erowlin Itu kesalahan. Anda tidak membutuhkan dua properti tinggi. Hanya ketinggian minimum yang cukup, edit jawabannya.
Surjith SM
316

Ada solusi yang disederhanakan dari bootstrap di sini (di mana Anda tidak perlu membuat kelas baru): http://getbootstrap.com/examples/sticky-footer-navbar/

Saat Anda membuka halaman itu, klik kanan pada browser dan "View Source" dan buka file sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar. css )

Anda dapat melihat bahwa Anda hanya membutuhkan CSS ini

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

untuk HTML ini

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>
Jboy Flaga
sumber
19
Ini (dari dokumentasi / contoh Bootstrap) harus menjadi jawaban yang diterima.
richardm
5
Bagi saya ini tidak berhasil karena footer saya agak tinggi. Sangat bagus jika Anda hanya menginginkan paragraf, tetapi paragraf saya memiliki beberapa kolom - menggunakan metode ini, saya berakhir dengan margin di bawah footer ketika saya turun ke ukuran yang lebih kecil
NightMICU
9
Bukankah ini solusi lengket Bootstraps? Saya tidak berpikir OP yang dimaksudkan ini. Bagi saya, dengan halaman yang panjang, footer saya muncul di bagian bawah layar tetapi tidak di bagian bawah konten (yaitu di atas konten). Saya harus mengubah Posisi: absolut; ke relatif (dalam kelas .footer) agar ini berfungsi.
Tino Mclaren
24
Ini akan menjadi jawaban yang benar jika topik ini tidak memiliki "tidak diperbaiki" dalam judul ...
ruudy
1
ini hanya berfungsi untuk footer dengan ukuran tetap, saya lebih suka solusi Philip Walton seperti yang diusulkan oleh @ChristopherTan yang super tipis dan independen dari tinggi footer
buergi
16

gunakan flexbox karena Anda bisa menggunakannya sesuai keinginan Anda. Solusi yang ditawarkan oleh bootstrap 4 masih memburu konten yang tumpang tindih dalam tata letak responsif, misalnya: itu akan pecah dalam tampilan seluler, saya menemukan trik yang paling rapi adalah dengan menggunakan demo solusi flexbox yang ditunjukkan di sini :( https://philipwalton.github.io / diselesaikan-oleh-flexbox / demo / sticky-footer / ) dengan cara ini kita tidak harus berurusan dengan masalah ketinggian tetap yang merupakan solusi usang sekarang ... solusi ini bekerja untuk bootstrap 3 dan 4 mana pun yang Anda gunakan.

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
Christopher Tan
sumber
1
Ini adalah solusi yang sangat cerdas. Saya pikir CSS memiliki terlalu banyak untuk ditawarkan sehingga kami bahkan tidak tahu bagaimana cara memaksimalkannya.
Gilbert
2
Saya suka solusi ini. Luar biasa.
Bagus Aji Santoso
14

UPDATE: Ini tidak langsung menjawab pertanyaan secara keseluruhan, tetapi orang lain mungkin menemukan ini berguna.

Ini adalah HTML untuk catatan kaki responsif Anda

<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>

Untuk CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

CATATAN: Pada saat posting untuk pertanyaan ini, baris kode di atas tidak mendorong catatan kaki di bawah konten halaman; tetapi itu akan menjaga footer Anda dari merangkak di tengah halaman ketika ada sedikit konten pada halaman. Untuk contoh yang mendorong footer di bawah konten halaman lihat di sini http://getbootstrap.com/examples/sticky-footer/

Rex CoolCode Charles
sumber
Ini sebenarnya solusi yang buruk, karena footer menutupi konten utama ketika mereka bertemu. Anda perlu mengatur padding-bottomwadah konten utama sama dengan ketinggian footer. Dan Anda perlu melakukannya secara dinamis di halaman loaddan resizeacara dan juga di footer DOMSubtreeModified.
tao
9

Untuk orang-orang yang masih berjuang dan solusi yang dijawab tidak bekerja sesuai keinginan Anda, berikut adalah solusi paling sederhana yang saya temukan.

Bungkus konten utama Anda dan berikan ketinggian tampilan minimal. Sesuaikan 60 dengan nilai berapa pun yang dibutuhkan gaya Anda.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Itu saja dan itu bekerja dengan cukup baik.

eGlu
sumber
Saya memiliki masalah yang sama dengan yang dimaksud. Setelah mencoba hampir semua jawaban berperingkat tinggi di sini, ini adalah satu-satunya yang berhasil untuk saya. Dan itu bekerja dalam semua ukuran. Hanya perubahan yang saya buat adalah "min-height: 70vh". Ini akan tergantung pada ukuran header dan footer situs Anda.
Arfath
Ini harus lebih tinggi, berfungsi persis seperti yang diminta.
yam
Ini bekerja untuk kebutuhan saya. Hanya men-tweak nilai min-height hingga Anda mendapatkan hasil yang diinginkan.
sawyerrken
Hebat, ini adalah solusi paling sederhana dan efisien untuk masalah penempatan footer!
Prahlad Yeri
5

Galen Gidman telah memposting solusi yang sangat bagus untuk masalah footer footer responsif yang tidak memiliki ketinggian tetap. Anda dapat menemukan solusi lengkapnya di blognya: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }
weiy
sumber
Ini sepertinya kompatibel dengan bootstrap, dan karenanya harus menjadi jawaban yang diterima, imho. Itu tidak sempurna, karena bilah gulir horizontal tampaknya akan muncul.
Florian Mertens
Florian: Tidak ada scrollbar horizontal untuk saya.
HardlyNoticeable
4

Untuk solusi CSS murni, gulir setelah tanggal 2 <hr>. Yang pertama adalah jawaban awal (diberikan pada tahun 2016)

Kelemahan utama dari solusi di atas adalah mereka memiliki ketinggian tetap untuk footer.
Dan itu tidak memotongnya di dunia nyata, di mana orang menggunakan jutaan perangkat dan memiliki kebiasaan buruk untuk memutarnya ketika Anda tidak menduganya dan ** Poof! ** Ada konten halaman Anda di belakang catatan kaki!

Di dunia nyata, Anda memerlukan fungsi yang menghitung ketinggian footer dan secara dinamis menyesuaikan konten halaman padding-bottomuntuk mengakomodasi ketinggian itu. Dan Anda perlu menjalankan fungsi kecil ini di halaman loaddan resizeacara serta di footer DOMSubtreeModified(kalau-kalau footer Anda diperbarui secara dinamis secara tidak sinkron atau mengandung elemen animasi yang mengubah ukuran ketika berinteraksi dengan).

Berikut adalah bukti konsep, menggunakan jQuery v3.0.0dan Bootstrap v4-alpha, tetapi tidak ada alasan mengapa itu tidak bekerja pada versi yang lebih rendah dari masing-masing.

Tampilkan cuplikan kode

Awalnya, saya telah memposting solusi ini di sini tetapi saya menyadari ini mungkin membantu lebih banyak orang jika diposting di bawah pertanyaan ini.

Catatan: Saya telah sengaja membungkus $([selector]).accomodateFooter()sebagai plugin jQuery, sehingga bisa dijalankan pada setiap elemen DOM, seperti di sebagian besar layout itu bukan $('body')'s bottom-paddingbahwa kebutuhan menyesuaikan, tetapi beberapa halaman wrapper elemen dengan position:relative(biasanya induk langsung dari footer) .

Sunting nanti (3+ tahun setelah jawaban awal):

Pada titik ini saya tidak lagi menganggap dapat diterima menggunakan JavaScript untuk memposisikan footer konten dinamis di bagian bawah halaman. Itu dapat dicapai dengan CSS saja, menggunakan flexbox, cepat, lintas-browser.

Ini dia:

Tampilkan cuplikan kode

tao
sumber
3

Metode ini menggunakan markup minimal. Masukkan saja semua konten Anda ke dalam .wrapper yang memiliki padding-bottom dan margin-bottom negatif sama dengan tinggi footer (dalam contoh saya 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>
Vin
sumber
2

Atau ini

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>
AnBisw
sumber
1

Untuk Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>
shilovk
sumber
2
Pertanyaannya secara spesifik menyatakan bahwa navbar-fixed-bottomBUKAN apa yang memecahkan masalah.
p4sh4
1

Tak satu pun dari solusi ini yang benar-benar bekerja untuk saya dengan sempurna karena saya menggunakan kelas navbar-inverse di footer saya. Tapi saya memang mendapatkan solusi yang berhasil dan bebas Javascript. Chrome yang digunakan untuk membantu dalam membentuk kueri media. Ketinggian footer berubah ketika layar mengubah ukuran sehingga Anda harus memperhatikan itu dan menyesuaikannya. Konten footer Anda (saya atur id = "footer" untuk mendefinisikan konten saya) harus menggunakan posisi = absolut dan bawah = 0 untuk menjaganya agar tetap di bawah. Lebar juga: 100%. Inilah CSS saya dengan pertanyaan media. Anda harus menyesuaikan min-width dan max-width dan menambah atau menghapus beberapa elemen:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}
Brian Edwards
sumber