Saya memiliki tata letak 2 kolom sederhana dengan catatan kaki yang menghapus div kanan dan kiri di markup saya. Masalah saya adalah saya tidak bisa mendapatkan footer untuk tetap di bagian bawah halaman di semua browser. Ini berfungsi jika konten mendorong footer ke bawah, tapi itu tidak selalu terjadi.

Untuk mendapatkan catatan kaki yang lengket:

1. Memiliki <div>dengan class="wrapper"konten Anda.

2. Tepat sebelum penutupan </div>dari wrappertempat <div class="push"></div>.

3. Tepat setelah penutupan </div>dari wrappertempat <div class="footer"></div>.

* {
    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 */
}

Gunakan unit CSS vh!

Mungkin cara yang paling jelas dan non-hacky tentang sticker footer adalah dengan menggunakan unit viewport css baru .

Ambil contoh markup sederhana berikut:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

Jika tajuknya mengatakan 80px tinggi dan footer 40px tinggi, maka kita dapat membuat footer lengket kami dengan satu aturan tunggal pada div konten:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

Yang berarti: biarkan ketinggian div konten setidaknya 100% dari tinggi viewport dikurangi tinggi gabungan header dan footer.

Itu dia.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

... dan inilah cara kode yang sama berfungsi dengan banyak konten di div konten:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

NB:

1) Tinggi header dan footer harus diketahui

2) Versi lama IE (IE8-) dan Android (4.4-) tidak mendukung unit viewport. ( caniuse )

3) Sekali waktu webkit memiliki masalah dengan unit viewport dalam aturan kalk. Ini memang sudah diperbaiki ( lihat di sini ) sehingga tidak ada masalah di sana. Namun jika Anda ingin menghindari menggunakan kalk karena alasan tertentu, Anda dapat mengatasinya dengan menggunakan margin negatif dan lapisan dengan ukuran kotak -

Seperti itu:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

Footer lengket dengan display: flex

Solusi yang terinspirasi oleh catatan kaki Philip Walton .

Penjelasan

Solusi ini hanya berlaku untuk :

• Chrome ≥ 21.0
• Firefox ≥ 20.0
• Internet Explorer ≥ 10
• Safari ≥ 6.1

Ini didasarkan pada flextampilan , meningkatkan flex-growproperti, yang memungkinkan suatu elemen tumbuh dengan tinggi atau lebar (ketika flow-directiondiatur ke salah satu columnataurow masing masing), untuk menempati ruang ekstra dalam wadah.

Kami juga akan memanfaatkan vhunit, 1vhyang didefinisikan sebagai :

1/100 dari ketinggian viewport

Karena itu ketinggiannya 100vhadalah cara ringkas untuk memberi tahu elemen untuk merentangkan ketinggian viewport penuh.

Ini adalah bagaimana Anda akan menyusun halaman web Anda:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

Agar footer menempel di bagian bawah halaman, Anda ingin ruang antara tubuh dan footer tumbuh sebanyak yang diperlukan untuk mendorong footer di bagian bawah halaman.

Karenanya tata letak kita menjadi:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

Penerapan

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

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

Anda bisa bermain dengannya di JSFiddle .

Keanehan Safari

Ketahuilah bahwa Safari memiliki implementasi flex-shrinkproperti yang cacat , yang memungkinkan barang menyusut lebih dari ketinggian minimum yang diperlukan untuk menampilkan konten. Untuk memperbaiki masalah ini, Anda harus menetapkan flex-shrinkproperti secara eksplisit ke 0 ke .contentdan footerpada contoh di atas:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

Anda bisa menggunakan position: absoluteberikut ini untuk meletakkan footer di bagian bawah halaman, tetapi kemudian pastikan 2 kolom Anda memiliki yang sesuai margin-bottomsehingga mereka tidak pernah terhambat oleh footer.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

Berikut ini adalah solusi dengan jQuery yang bekerja seperti pesona. Ia memeriksa apakah ketinggian jendela lebih besar dari ketinggian tubuh. Jika ya, maka itu mengubah margin-top dari footer untuk mengkompensasi. Diuji di Firefox, Chrome, Safari dan Opera.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

Jika catatan kaki Anda memiliki margin-top (50 piksel, misalnya), Anda perlu mengubah bagian terakhir untuk:

css( 'margin-top', height_diff + 50 )

Tetapkan CSS untuk #footerke:

position: absolute;
bottom: 0;

Anda kemudian perlu menambahkan paddingatau marginke bawah Anda #sidebardan #contentuntuk mencocokkan ketinggian #footeratau ketika mereka tumpang tindih, itu#footer akan menutupi mereka.

Juga, jika saya ingat dengan benar, IE6 memiliki masalah dengan bottom: 0CSS. Anda mungkin harus menggunakan solusi JS untuk IE6 (jika Anda peduli tentang IE6).

Solusi serupa dengan @gcedo tetapi tanpa perlu menambahkan konten perantara untuk menekan footer. Kami cukup menambahkan margin-top:autoke footer dan itu akan didorong ke bagian bawah halaman terlepas dari tinggi atau tinggi konten di atas.

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

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Sumber: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Saya sendiri kadang-kadang berjuang dengan ini dan saya selalu menemukan bahwa solusi dengan semua div dalam satu sama lain adalah solusi yang berantakan. Saya hanya sedikit mengacaukannya, dan saya pribadi mengetahui bahwa ini berhasil dan tentu saja merupakan salah satu cara paling sederhana:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

Apa yang saya suka tentang ini adalah bahwa tidak ada HTML tambahan yang perlu diterapkan. Anda dapat menambahkan CSS ini dan kemudian menulis HTML Anda kapan saja

Karena solusi Grid belum disajikan, ini dia, dengan hanya dua deklarasi untuk elemen induk , jika kita menerima height: 100%dan margin: 0menerima:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}

<div class="content">Content</div>
<footer>Footer</footer>

• align-content: space-between

Barang-barang didistribusikan secara merata di dalam wadah pelurusan sepanjang sumbu silang. Jarak antara setiap pasangan item yang berdekatan adalah sama. Item pertama rata dengan ujung start utama, dan item terakhir flush dengan tepi ujung utama.

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

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

Ini harus dilakukan jika Anda mencari footer responsif yang disejajarkan di bagian bawah halaman, yang selalu menjaga margin atas 80% dari tinggi viewport.

Gunakan penentuan posisi absolut dan indeks-z untuk membuat div footer lengket pada resolusi apa pun menggunakan langkah-langkah berikut:

• Buat div footer dengan position: absolute; bottom: 0; dan ketinggian yang diinginkan
• Atur padding dari footer untuk menambahkan spasi putih antara bagian bawah konten dan bagian bawah jendela
• Buat wadah divyang membungkus isi tubuh denganposition: relative; min-height: 100%;
• Tambahkan padding bawah ke konten utama div yang sama dengan tinggi plus padding dari footer
• Atur z-indexfooter lebih besar dari wadah divjika footer dipotong

Berikut ini sebuah contoh:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

Untuk pertanyaan ini banyak jawaban yang saya lihat kikuk, sulit diterapkan dan tidak efisien jadi saya pikir saya akan mencobanya dan menghasilkan solusi saya sendiri yang hanya sedikit css dan html

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

ini bekerja dengan mengatur ketinggian footer dan kemudian menggunakan css calc untuk mengetahui tinggi minimum halaman dengan footer masih di bagian bawah, semoga ini membantu beberapa orang :)

Salah satu solusinya adalah dengan mengatur min-height untuk kotak. Sayangnya sepertinya itu tidak didukung oleh IE (kejutan).

Tak satu pun dari solusi css murni ini berfungsi dengan baik dengan mengubah ukuran konten secara dinamis (setidaknya pada firefox dan Safari) misalnya, jika Anda memiliki latar belakang yang ditetapkan pada div wadah, halaman dan kemudian mengubah ukuran (menambahkan beberapa baris) tabel di dalam div, Tabel dapat menjulur keluar dari bagian bawah area gaya, yaitu, Anda dapat memiliki setengah meja putih di tema hitam dan setengah meja putih lengkap karena baik warna font dan warna latar belakang putih. Ini pada dasarnya tidak bisa diperbaiki dengan halaman-halaman tema.

Layout multi-kolom div bersarang adalah retas yang jelek dan tubuh / wadah div 100% tinggi untuk sticker footer adalah retas yang lebih buruk.

Satu-satunya solusi tanpa skrip yang berfungsi pada semua browser yang saya coba: tabel yang jauh lebih sederhana / lebih pendek dengan thead (untuk header) / tfoot (untuk footer) / tbody (td untuk sejumlah kolom) dan tinggi 100%. Tapi ini dianggap kerugian semantik dan SEO (tfoot harus muncul sebelum tbody. Peran ARIA dapat membantu mesin pencari yang layak).

Banyak orang telah memberikan jawaban untuk masalah sederhana ini di sini, tetapi saya memiliki satu hal untuk ditambahkan, mengingat betapa frustrasinya saya sampai saya menemukan kesalahan saya.

Seperti yang disebutkan cara paling mudah untuk melakukan ini adalah seperti itu ..

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

Namun properti yang tidak disebutkan dalam posting, mungkin karena biasanya default, adalah posisi: statis pada tag tubuh. Posisi relatif tidak akan berfungsi!

Tema wordpress saya telah mengesampingkan tampilan tubuh default dan itu membingungkan saya untuk waktu yang lama.

Sebuah utas lama yang saya tahu, tetapi jika Anda mencari solusi yang responsif, penambahan jQuery ini akan membantu:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

Panduan lengkap dapat ditemukan di sini: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Saya telah membuat perpustakaan yang sangat sederhana https://github.com/ravinderpayal/FooterJS

Ini sangat sederhana digunakan. Setelah memasukkan pustaka, panggil saja baris kode ini.

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

Footer dapat diubah secara dinamis dengan mengingat fungsi di atas dengan parameter / id yang berbeda.

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

Catatan: - Anda belum mengubah atau menambahkan CSS. Pustaka adalah dinamis yang menyiratkan bahwa bahkan jika layar diubah ukurannya setelah memuat halaman, itu akan mengatur ulang posisi footer. Saya telah membuat perpustakaan ini, karena CSS memecahkan masalah untuk sementara waktu tetapi ketika ukuran layar berubah secara signifikan, dari desktop ke tablet atau sebaliknya, mereka tumpang tindih konten atau mereka tidak lagi tetap lengket.

Solusi lain adalah Permintaan Media CSS, tetapi Anda harus secara manual menulis gaya CSS yang berbeda untuk ukuran layar yang berbeda sementara pustaka ini bekerja secara otomatis dan didukung oleh semua browser pendukung JavaScript dasar.

Edit solusi CSS:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

Sekarang, jika ketinggian tampilan lebih dari panjang konten Anda, kami akan membuat footer diperbaiki ke bawah dan jika tidak, itu akan muncul secara otomatis di bagian paling akhir layar karena Anda perlu menggulir untuk melihatnya.

Dan, sepertinya ini solusi yang lebih baik daripada JavaScript / library.

Saya tidak beruntung dengan solusi yang disarankan di halaman ini sebelumnya tetapi akhirnya, trik kecil ini berhasil. Saya akan memasukkannya sebagai solusi lain yang mungkin.

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Solusi Flexbox

Tata letak fleksibel lebih disukai untuk ketinggian header dan footer alami. Solusi fleksibel ini diuji di browser modern dan benar-benar berfungsi :) di IE11.

Lihat JS Fiddle .

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

Bagi saya cara terbaik untuk menampilkannya (footer) adalah tetap pada bagian bawah tetapi tidak mencakup konten sepanjang waktu:

#my_footer {
    position: static
    fixed; bottom: 0
}

jQuery CROSS BROWSER CUSTOM PLUGIN - $ .footerBottom ()

Atau gunakan jQuery seperti saya, dan setel tinggi kaki Anda ke autoatau kefix , apa pun yang Anda suka, itu tetap akan berhasil. plugin ini menggunakan pemilih jQuery sehingga untuk membuatnya berfungsi, Anda harus memasukkan perpustakaan jQuery ke file Anda.

Inilah cara Anda menjalankan plugin. Impor jQuery, salin kode plugin jQuery khusus ini dan impor setelah mengimpor jQuery! Ini sangat sederhana dan mendasar, tetapi penting.

Ketika Anda melakukannya, yang harus Anda lakukan adalah menjalankan kode ini:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

tidak perlu menempatkannya di dalam acara siap dokumen. Ini akan berjalan dengan baik seperti apa adanya. Ini akan menghitung ulang posisi footer Anda ketika halaman dimuat dan ketika jendela diubah ukurannya.

Ini kode plugin yang tidak perlu Anda mengerti. Hanya tahu cara mengimplementasikannya. Itu melakukan pekerjaan untuk Anda. Namun, jika Anda ingin tahu cara kerjanya, lihat saja kodenya. Saya meninggalkan komentar untuk Anda.

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5

/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

Solusi flex bekerja untuk saya sejauh membuat footer lengket, tetapi sayangnya mengubah tubuh untuk menggunakan tata letak flex membuat beberapa tata letak halaman kami berubah, dan bukan menjadi lebih baik. Yang akhirnya berhasil bagi saya adalah:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

Saya mendapatkan ini dari tanggapan ctf0 di https://css-tricks.com/couple-takes-sticky-footer/

Jika Anda tidak ingin itu menggunakan posisi tetap, dan mengikuti Anda dengan mengganggu di ponsel, ini sepertinya bekerja untuk saya sejauh ini.

html {
    min-height: 100%;
    position: relative;
}

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

Cukup atur html ke min-height: 100%;dan position: relative;, kemudian position: absolute; bottom: 0; left: 0;di footer. Saya kemudian memastikan bahwa kaki adalah elemen terakhir dalam tubuh.

Beri tahu saya jika ini tidak berhasil untuk orang lain, dan mengapa. Saya tahu peretasan gaya yang membosankan ini dapat berperilaku aneh di antara berbagai keadaan yang tidak pernah saya pikirkan.

Coba letakkan div kontainer (dengan overflow: otomatis) di sekitar konten dan bilah sisi.

Jika itu tidak berhasil, apakah Anda memiliki tangkapan layar atau tautan contoh di mana footer tidak ditampilkan dengan benar?