Footer di bagian bawah halaman atau konten, mana saja yang lebih rendah

94

Saya memiliki struktur berikut:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Saya secara dinamis memuat konten dalam <article>menggunakan javascript. Karena itu, ketinggian <article>balok bisa berubah.

Saya ingin <footer>blokir berada di bagian bawah halaman ketika ada banyak konten, atau di bagian bawah jendela browser ketika hanya ada beberapa baris konten.

Saat ini saya dapat melakukan satu atau yang lain ... tetapi tidak keduanya.

Jadi, apakah ada yang tahu bagaimana saya bisa melakukan ini - dapatkan tombol <footer>untuk menempel di bagian bawah halaman / konten atau bagian bawah layar, tergantung mana yang lebih rendah.

Akan
sumber
Apakah orang akan peduli untuk mengomentari mengapa mereka tidak memilih pertanyaan berusia 2 tahun?
Akankah
Ayolah, sudah hampir 6 tahun ...
Akankah

Jawaban:

101

Sticky footer Ryan Fait sangat bagus, namun menurut saya struktur dasarnya kurang *.


Versi Flexbox

Jika Anda cukup beruntung karena dapat menggunakan flexbox tanpa perlu mendukung browser lama, sticky footer menjadi sangat mudah, dan mendukung footer yang berukuran dinamis.

Trik untuk membuat footer menempel di bagian bawah dengan flexbox adalah dengan memiliki elemen lain dalam wadah yang sama secara vertikal. Yang dibutuhkan hanyalah elemen pembungkus full-height dengan display: flexdan setidaknya satu saudara kandung dengan flexnilai lebih besar dari 0:

CSS:
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}


Jika Anda tidak dapat menggunakan flexbox, struktur dasar pilihan saya adalah:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

Yang tidak terlalu jauh dari:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

Trik untuk membuat footer menempel adalah dengan membuat footer berlabuh ke bantalan bawah elemen yang memuatnya. Ini membutuhkan tinggi footer statis, tetapi saya telah menemukan bahwa footer biasanya memiliki tinggi statis.

HTML:
<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>
CSS:
#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

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

Dengan footer ditambatkan ke #main-wrapper, Anda sekarang harus #main-wrappersetidaknya setinggi halaman, kecuali anak-anaknya lebih panjang. Hal ini dilakukan dengan membuat #main-wrappermemiliki min-heightdari 100%. Anda juga harus ingat bahwa orang tuanya, htmldan bodyharus setinggi halaman juga.

CSS:
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

Tentu saja, Anda harus mempertanyakan penilaian saya, karena kode ini memaksa footer jatuh dari bagian bawah halaman, bahkan ketika tidak ada konten. Trik terakhir adalah dengan mengubah model kotak yang digunakan #main-wrappersehingga min-heightdari 100%menyertakan file100px paddingnya.

CSS:
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

Dan begitulah, footer lengket dengan struktur HTML asli Anda. Pastikan saja bahwa footer's heightsama dengan #main-wrapper' padding-bottom, dan Anda harus disetel.


* Alasan saya menemukan kesalahan dengan struktur Fait adalah karena ia menetapkan elemen .footerdan .headerpada tingkat hierarki yang berbeda sambil menambahkan .pushelemen yang tidak perlu .

zzzzBov
sumber
Saya perlu menambahkan #main-wrapper *:first-child { margin-top: 0; }, jika tidak halaman akan terlalu panjang dengan margin atas anak pertama (menyebabkan scrollbar yang tidak perlu pada halaman pendek).
Florian Brucker
Terima kasih, @zzzzBov atas penjelasan menyeluruh ini, dan terutama karena menyebutkan arah-fleksibel (semoga saya menemukan ini lebih cepat - akan menyelamatkan saya beberapa jam! :)
ea0723
Versi Flexbox tidak berfungsi untuk saya di IE11, tetapi pendekatan lain baik-baik saja untuk saya! Terima kasih dan +1!
Matt
@Matt, Anda perlu menggunakan awalan browser agar flexbox berfungsi di IE11. gunakan alat seperti autoprefixer dan Anda tidak perlu khawatir menambahkannya secara manual.
zzzzBov
2
Tautan footer tempel tampaknya rusak karena situsnya diubah menjadi pemberitahuan In Memoriam untuknya. Selain itu, tidak ada versi yang disimpan dalam cache karena pengaturan robots.txt
tzrlk
13

Sticky footer Ryan Fait adalah solusi sederhana yang telah saya gunakan beberapa kali di masa lalu.

HTML Dasar :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS :

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Menerjemahkan ini agar serupa dengan apa yang sudah Anda hasilkan dengan sesuatu di sepanjang baris ini:

HTML :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

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

Jangan lupa untuk memperbarui negatif pada margin pembungkus agar sesuai dengan tinggi footer dan div dorong. Semoga berhasil!

Josh Mein
sumber
4
Saya suka cara dia meletakkan komentar di bagian bawah, sesuai untuk solusi footer: D
Madara's Ghost
Tidak perlu mengubah markup untuk gaya khusus ini.
zzzzBov
@zzzzBov Saya tidak punya banyak waktu untuk membahas ini lebih jauh sekarang, tapi apa sebenarnya yang Anda maksud?
Josh Mein
Saya menggunakan ATM seluler saya, jadi saya tidak dapat menulis jawaban lengkap jika tidak, saya sudah melakukannya. Komentarnya lebih dari itu, jadi saya ingat untuk menambahkan jawaban nanti.
zzzzBov
@JoshMein, saya telah menambahkan jawaban yang menjelaskan cara membuat footer tetap menempel tanpa mengacaukan struktur yang disediakan.
zzzzBov
0

Saya sedang mencari untuk menyelesaikan masalah ini tanpa menambahkan markup tambahan, jadi saya akhirnya menggunakan solusi berikut:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}
<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

Anda harus mengetahui tinggi header, nav dan footer untuk dapat mengatur min-height artikel. Dengan ini, jika artikel hanya memiliki beberapa baris konten, footer akan menempel di bagian bawah jendela browser, jika tidak maka akan berada di bawah semua konten.

Anda dapat menemukan ini dan solusi lain yang diposting di atas di sini: https://css-tricks.com/couple-takes-sticky-footer/

Galina E
sumber