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/