Twitter Bootstrap 3 Sticky Footer

204

Saya telah menggunakan kerangka bootstrap twitter cukup lama sekarang dan mereka baru saja diperbarui ke versi 3!

Saya mengalami kesulitan mendapatkan footer lengket untuk menempel ke bawah, saya telah menggunakan template starter yang disediakan oleh situs bootstrap twitter, tetapi masih tidak berhasil, ada ide?

html css twitter-bootstrap twitter-bootstrap-3 Brad Fletcher
sumber
31
contoh resmi: getbootstrap.com/examples/sticky-footer-navbar
ptim
3
@memeLab mengapa contoh resmi tidak memiliki apa-apa tentang tubuh-bottom margin: -60px? Atau apakah saya melewatkannya ...?
ganders
Menambahkan solusi CSS saja yang memungkinkan tinggi variabel untuk footer lengket. Ditautkan di sini sebagai, sebagai jawaban baru, ada di bagian bawah halaman.
tao

Jawaban:

194

cukup tambahkan kelas navbar-fixed-bottom ke catatan kaki Anda.

<div class="footer navbar-fixed-bottom">
Jon
sumber
32
ini tidak sama dengan catatan kaki lengket
Yura Omelchuk
3
Jika Anda memiliki header dan footer, Anda kehilangan terlalu banyak ruang di perangkat seluler.
strattonn
4
@strattonn untuk itulah pertanyaan media
Jacob Raccuia
20
Ini berfungsi dengan baik jika halaman tidak membutuhkan gulir. Tetapi footer tumpang tindih dengan lebih banyak konten di halaman. Adakah solusi untuk hal ini? Terima kasih!
Xplora
1
tidak yakin tentang masalah tumpang tindih, tetapi apakah menambahkan margin / padding tidak menyelesaikan masalah?
Jon
152

Mengacu pada contoh lengket footer resmi Boostrap3, tidak perlu menambahkan <div id="push"></div>, dan CSS lebih sederhana.

CSS yang digunakan dalam contoh resmi adalah:

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

dan HTML yang penting:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

Anda dapat menemukan tautan untuk css ini di kode sumber contoh sticky-footer .

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

URL lengkap: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

tkymtk
sumber
21
HTML & CSS dalam contoh sticky-footer resmi sekarang sangat berbeda dari apa yang dijelaskan di sini misalnya tidak ada 'bungkus' yang digunakan lagi.
IanB
52

Berikut adalah metode yang akan menambahkan footer lengket yang tidak memerlukan CSS atau Javascript tambahan selain apa yang sudah ada di Bootstrap dan tidak akan mengganggu footer Anda saat ini.

Contoh di sini: Footer Mudah Lengket

Cukup salin dan tempel ini langsung ke kode Anda. Tidak perlu repot.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
anataliocs
sumber
4
Sangat bagus dan cepat. Dapat responsif juga. Tetapi ada kebutuhan untuk menambahkan beberapa ruang tambahan di bagian bawah konten halaman sehingga tidak disembunyikan oleh footer. Ruang harus memiliki tinggi yang sama dengan tinggi footer. Bisakah Anda menunjukkan cara terbaik untuk melakukannya? BTW "tidak memerlukan CSS apa pun" secara teknis salah. Seharusnya "tidak memerlukan CSS tambahan selain kelas Bootstrap" .
ADTC
1
Saya suka ini memanfaatkan apa yang ada di bootstrap. Saya tidak bisa mendapatkan jawaban atas lainnya untuk bekerja tetapi menempelkan ini di halaman saya dan bam, footer footer. Terima kasih!
haakon.io
34

Selain CSS yang baru saja Anda tambahkan, ingat Anda harus menambahkan push push sebelum menutup wrap wrap

Struktur dasar untuk HTML adalah 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Tampilan langsung
Edit tampilan

David Taiaroa
sumber
Jika konten halaman lebih besar dari tampilan yang tersedia, footer akan didorong ke bawah. Saya ingin footer benar-benar menempel ke bawah (seperti navbar-fixed-bottom)
blueFast
hey @delavnog, apakah sesuatu seperti ini cocok untuk Anda? codepen.io/panchroma/pen/wMXWpY . Satu-satunya bit penting bagi Anda adalah HTML pada baris 647 dan CSS
David Taiaroa
@delavnog, ide yang sama dengan konten minimal di halaman codepen.io/panchroma/pen/JGZKqy
David Taiaroa
Terima kasih, itu hebat! Sekarang, jika saya bisa membuat div utama terpusat secara vertikal antara nav dan footer, itu akan luar biasa! Diedit codepen Anda: codepen.io/anon/pen/rxKMaW (saya harus menambahkan margin ke tubuh, karena nav memakan bagian atas konten)
blueFast
@delavnog, ini awal jika badan utama tidak terlalu tinggi. Akan membutuhkan lebih banyak pekerjaan untuk konten yang lebih lama: codepen.io/panchroma/pen/vLrXMq
David Taiaroa
30

Berikut adalah kode sederhana Sticky Footer pada hari ini karena mereka selalu mengoptimalkannya dan ini BAIK:

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

/* 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;
}
Leniel Maccaferri
sumber
1
Solusi sempurna. Itu yang saya cari.
Levimatt
1
Sayangnya footer ini memiliki ukuran yang tetap. Terkadang, ketika footer dinamis, ia bisa lebih besar atau lebih kecil daripada tingginya di css.
23W
27

Saya agak terlambat pada subjek tetapi saya menemukan posting ini karena saya baru saja digigit oleh pertanyaan itu dan akhirnya menemukan cara yang sangat mudah untuk mengatasinya, cukup gunakan navbardengan navbar-fixed-bottomkelas yang diaktifkan. Sebagai contoh:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

iMil
sumber
Saya suka kesederhanaan dan efektivitas jawaban Anda, yang omong-omong adalah jawaban yang cerdas. Banyak jawaban untuk masalah yang sama penuh dengan jquery, dan hal-hal rumit. Terima kasih sobat.
digitai
1
Separuh solusi, Anda masih perlu menangani tumpang tindih konten pada halaman Anda jika Anda mengubah ukurannya.
Baldráni
@ Baldráni Tidak ada solusi lengkapnya, tumpang tindih berfungsi dengan baik jika Anda menggunakan baris Bootstrap dan col di html footer (yang memang harus Anda lakukan)
Tino Mclaren
Ini bukan footer lengket. Ini adalah navbar bawah tetap yang hanya cocok untuk konten navbar, dan tumpang tindih dengan konten halaman.
Zim
10

Ini solusi saya yang diperbarui untuk masalah 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;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

Dan gunakan seperti ini: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

Atau 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
zee
sumber
4
Ini bukan solusi yang baik karena footer Anda diperbaiki yang berarti tumpang tindih konten halaman (jika ada). Coba tambahkan beberapa some text<br>baris sebelum footer dan ukuran ke bawah jendela.
jmarceli
@ user2041318: ya itu mengerikan ... terima kasih telah menunjukkan ini.
Sebastian
Ini telah diperbaiki sesuai komentar jmarceli. Footer tidak lagi diperbaiki.
zee
3

Contoh lengket tidak bekerja untuk saya. Solusi saya:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
Andi Giga
sumber
Sederhana, CSS kuno yang bagus. Pekerjaan selesai. Saya merasa lucu betapa berbelit-belitnya beberapa jawaban berperingkat tinggi. Bukankah Bootstrap seharusnya membuat hidup kita lebih mudah? 😂
Kal
2

Dorongan divharus tepat setelah wrap, TIDAK dalam .. seperti ini 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
Joseph
sumber
2

Dijawab oleh OP:

Tambahkan ini ke file CSS Anda.

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
CodeCaster
sumber
2

Saya ingin footer lengket yang fleksibel yang , itulah sebabnya saya datang ke sini. Jawaban teratas membuat saya ke arah yang benar.

Bootstrap 3 css Sticky footer saat ini (2 Oktober 16) (Ukuran tetap) terlihat seperti ini:

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;
}

Selama footer memiliki ukuran tetap, margin-tubuh bawah menciptakan dorongan untuk memungkinkan saku untuk footer untuk duduk. Dalam hal ini, keduanya diatur ke 60px. Tetapi jika footer tidak diperbaiki dan melebihi tinggi 60px, itu akan mencakup konten halaman Anda.

Jadikan Fleksibel: Hapus margin tubuh css dan tinggi kaki. Kemudian tambahkan JavaScript untuk mendapatkan tinggi footer dan mengatur marginBottom tubuh. Itu dilakukan dengan fungsi setfooter (). Selanjutnya tambahkan pendengar acara untuk saat halaman memuat pertama dan mengubah ukuran yang menjalankan setfooter. Catatan: Jika footer Anda memiliki akordeon atau apa pun yang memicu perubahan ukuran, tanpa mengubah ukuran jendela, Anda harus memanggil fungsi setfooter () lagi.

Jalankan cuplikan dan kemudian layar penuh untuk demo.

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
Luaskan cuplikan

Lebih keras
sumber
2

Ini telah dipecahkan oleh flexbox, sekali dan selamanya:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

HTML

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

CSS

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

.Site-content {
  flex: 1;
}
Konstantin Schubert
sumber
2

Js sederhana

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

Perbarui # 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
fdrv
sumber
1

Untuk meringkas semua ini, ingat satu hal di benak Anda bahwa segala sesuatu kecuali yang seharusnya dimiliki oleh footer min-height: 100%atau kurang.

kshirish
sumber
1

Saya menulis kode footer lengket sederhana saya dengan padding menggunakan KURANG. Jawaban ini mungkin di luar topik karena pertanyaannya tidak berbicara tentang bantalan, jadi jika Anda tertarik periksa posting ini untuk detail lebih lanjut.

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
Fred K
sumber
1

Berdasarkan jawaban Jek-fdrv , saya menambahkan sebuah .on('resize', function()untuk memastikan itu berfungsi pada setiap perangkat dan setiap resolusi:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
iamchriswick
sumber
1

Versi bootstrap saat ini tampaknya tidak berfungsi lagi untuk fungsi ini. Jika Anda mengunduh contoh sticky-footer-navbar mereka dan menempatkan sejumlah besar konten di area badan utama footer akan didorong melewati bagian bawah viewport. Sama sekali tidak lengket.

CJ Catalano
sumber
1

Berikut ini adalah solusi berbasis CSS untuk footer footy tinggi variabel yang sepenuhnya responsif.
Keuntungan: footer memungkinkan tinggi variabel, karena ketinggian tidak perlu lagi dikodekan dalam CSS.

Tampilkan cuplikan kode

Dan ini adalah un-prefixed SCSS(for gulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
tao
sumber
1

Cukup gunakan flex! Pastikan untuk menggunakan tubuh dan utama dalam HTML Anda dan itu adalah salah satu solusi terbaik (kecuali jika Anda memerlukan dukungan IE9). Itu tidak membutuhkan ketinggian tetap atau serupa.

Itu direkomendasikan untuk Terwujud juga!

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

main {
    flex: 1 0 auto;
}
kentor
sumber
0

dalam kata-kata Haml & Sass semua yang diperlukan:

Haml untuk app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass untuk app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

berdasarkan http://getbootstrap.com/examples/sticky-footer-navbar/

setara8
sumber
0

Jika Anda ingin menggunakan bootstrap build di kelas untuk footer. Anda juga harus menulis beberapa javascript:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

Ini akan mencegah konten yang tumpang tindih oleh footer tetap, dan itu akan menyesuaikan padding-bottomketika pengguna mengubah ukuran jendela / layar.

Dalam skrip di atas saya berasumsi bahwa footer ditempatkan langsung di dalam tag tubuh seperti itu:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

Ini jelas bukan solusi terbaik (karena JS yang dapat dihindari), tetapi bekerja tanpa masalah dengan tumpang tindih, mudah diterapkan dan responsif ( heighttidak di-hardcode dalam CSS).

Jmarceli
sumber
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
Luaskan cuplikan

Gpak
sumber
Bagaimana ini lengket di bagian bawah?
Sebastian
0

Ini adalah footer lengket yang sangat sederhana dan bersih yang dapat Anda gunakan di bootstrap. Benar-Benar Responsif!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

Contoh: Demo CodePen

Gothburz
sumber
Solusi ini akan menggeser bilah footer ke kanan saat membuka modal bootstrap karena penentuan posisi absolut!
thethakuri
0

Menggunakan flexboxadalah cara termudah yang saya temukan, dari orang-orang dari CSS-trik . Ini adalah sticky-footer sejati, ini berfungsi saat konten <100% dari halaman dan> 100% dari halaman:

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

Dan CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

Perhatikan bahwa ini adalah bootstrap-agnostic, sehingga ia bekerja dengan bootstrap dan tanpanya.

bustawin
sumber
0

Anda bisa mencoba menambahkan kelas di navbar footer Anda:

navbar-fixed-bottom

Kemudian buat CSS bernama custom.css dan body padding seperti ini ..

body { padding-bottom: 70px; }
Ikram - Ud - Daula
sumber