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

Question 1

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.

Question 2

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

Tampilkan cuplikan kode

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

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

Luaskan cuplikan

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

Tampilkan cuplikan kode

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

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

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

Luaskan cuplikan

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

Tampilkan cuplikan kode

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

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

Luaskan cuplikan

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

Tampilkan cuplikan kode

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

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

Luaskan cuplikan

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

Question 3

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!

Question 4

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>

Luaskan cuplikan

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/

Answer 1

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.

Answer 2

Apakah orang akan peduli untuk mengomentari mengapa mereka tidak memilih pertanyaan berusia 2 tahun?

Akankah

Answer 3

Ayolah, sudah hampir 6 tahun ...

Akankah

Answer 4

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

Tampilkan cuplikan kode

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

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

Luaskan cuplikan

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

Tampilkan cuplikan kode

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

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

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

Luaskan cuplikan

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

Tampilkan cuplikan kode

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

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

Luaskan cuplikan

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

Tampilkan cuplikan kode

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

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

Luaskan cuplikan

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

Answer 5

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

Answer 6

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

Answer 7

Versi Flexbox tidak berfungsi untuk saya di IE11, tetapi pendekatan lain baik-baik saja untuk saya! Terima kasih dan +1!

Matt

Answer 8

@Matt, Anda perlu menggunakan awalan browser agar flexbox berfungsi di IE11. gunakan alat seperti autoprefixer dan Anda tidak perlu khawatir menambahkannya secara manual.

zzzzBov

Answer 9

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

Answer 10

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!

Answer 11

4

Saya suka cara dia meletakkan komentar di bagian bawah, sesuai untuk solusi footer: D

Madara's Ghost

Answer 12

Tidak perlu mengubah markup untuk gaya khusus ini.

zzzzBov

Answer 13

@zzzzBov Saya tidak punya banyak waktu untuk membahas ini lebih jauh sekarang, tapi apa sebenarnya yang Anda maksud?

Josh Mein

Answer 14

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

Answer 15

@JoshMein, saya telah menambahkan jawaban yang menjelaskan cara membuat footer tetap menempel tanpa mengacaukan struktur yang disediakan.

zzzzBov

Answer 16

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>

Luaskan cuplikan

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/

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

Jawaban:

Versi Flexbox