Bagaimana Anda membuat catatan kaki tetap di bagian bawah halaman Web?


291

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.


Saya akan menambahkan ke @ Jimmy: Anda juga harus menyatakan posisi absolut (atau relatif) ke elemen yang berisi catatan kaki. Dalam kasus Anda, itu adalah elemen tubuh. Sunting: Saya mengujinya di halaman Anda dengan pembakar dan sepertinya berfungsi dengan sangat baik ...
yoavf

mungkin Anda perlu merentangkan html-halaman-ke-penuh-tinggi seperti tautan ini mengatakan: makandracards.com/makandra/…
sina

Jawaban:


199

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

4
@ jlp: Anda perlu menambahkan tag formulir ke ketinggian: pernyataan 100%, kalau tidak akan merusak footer footer. Seperti ini: html, body, form {height: 100%;}
dazbradbury

Saya perhatikan bahwa menambahkan padding ke footer mengacaukannya, tetapi menemukan bahwa itu dapat diperbaiki dengan mengurangi padding tambahan pada footer dari ketinggian {footer, push}.
nicooga

1
Penjelasan terperinci dengan demo disediakan di situs ini: CSS Sticky Footer
mohitp

Hei, aku mengikuti langkahmu dan itu bekerja dengan cukup baik untuk halaman besar. Tetapi pada halaman-halaman kecil di mana pengguna tidak dapat menggulir ke bawah footer sedikit jauh di bagian bawah. Jadi itu membuat halaman yang hampir kosong dapat digulir. Adakah yang tahu bagaimana cara memperbaikinya? Anda dapat melihat halaman pengujian saya di sini terlindung-escarpment-6887.herokuapp.com
Syk

1
@Syk saya telah menemukan bahwa mengurangi ketinggian min membantu. 94% adalah nilai ok, tetapi Anda masih melihat masalah di ponsel :( Tidak yakin ada solusi nyata di sini.
ACK_stoverflow

84

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.

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

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:


4
Ini adalah solusi terbaik yang pernah saya lihat di sini, bekerja bahkan dalam kasus saya yang aneh dengan beberapa konten isi. Meluap ke catatan kaki untuk siapa-tahu-apa-alasan. Dan saya kira dengan sth seperti Sass dan variabel, ini bisa menjadi lebih fleksibel.
themarketka

1
Memang, ini bekerja seperti pesona. Mudah untuk mundur untuk browser yang juga tidak mendukung.
Aramir

3
Bagaimana mengacau dengan pengukuran absolut yang masih belum diretas? Paling-paling itu mungkin kurang hacky
Jonathan

Tapi dan jika tinggi footer dan header di-mensurve dalam persen dan bukan px? Suka 15% dari tinggi halaman?
Fernanda Brum Lousada

3
Unit viewport tidak selalu berfungsi seperti yang diharapkan pada peramban seluler yang menyembunyikan atau menampilkan bilah alamat tergantung pada posisi gulir
Evgeny

57

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

13
Saya merasa ini adalah jawaban yang benar, karena itu sebenarnya satu-satunya pendekatan yang bekerja bahkan ketika ketinggian catatan kaki tidak diketahui.
fstanis

Ini mengacaukan grid dengan Rapi 2
Halfacht

Tapi mengapa bukan solusi Philip Walton itu sendiri, mengapa elemen "spacer" tambahan?
YakovL

@YakovL Dalam .Site-contentelemen solusi Walton memainkan peran yang sama dengan spacer. Hanya disebut berbeda.
Gherman

@ Gembala juga, .Site-contentmemiliki analog .contentdalam markup ini .. tetapi tidak pernah, saya meminta case gcedo memiliki beberapa ide spesifik tentang hal itu, tidak perlu menebak
YakovL

30

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

Saya sudah mencoba ini dengan pengaturan serupa (dua kolom + footer) dan tidak berfungsi.
isomorphismes

14
Itu tumpang tindih dengan konten jika konten tumbuh.
Satya Prakash

1
itu sebabnya konten memiliki margin-bottom. Anda harus mengaturnya hingga ketinggian tetap apa pun yang Anda buat di footer.
Jimmy

Untuk apa nilainya, jika sesuatu bernilai nol, tidak peduli apa unit pengukurannya, tidak ada apa-apa, jadi semua yang ada 0pxdi semua lembar gaya yang saya lihat seharusnya adil 0.
Jonathan

bagaimana jika tinggi halaman lebih dari tinggi tampilan atau panjang konten footer dinamis? Lihat jawaban saya untuk solusi masalah ini.
Ravinder Payal

15

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 )

Salah satu alternatif adalah menambahkan div "pusher" tepat di depan footer. Kemudian atur tinggi pusher div. Ini menghindari harus berurusan dengan margin-top yang ada
Sarsaparilla

Lihat jawaban saya untuk solusi no-js.
ferit

11

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


10
ketika jendela terlalu kecil, footer muncul di depan konten dengan css ini.
Seichi

1
Lihat jawaban saya @ Seichi
ferit

6

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>


1
Pendekatan lain adalah memberi .content flex: 1 0 auto;untuk membuatnya tumbuh dan tidak bisa ditipiskan, tetapi margin-top: auto;merupakan trik yang bagus yang melibatkan penata gaya, bukan "tidak terkait" .contentyang bagus. Sebenarnya, saya ingin tahu mengapa flex diperlukan dalam pendekatan ini ..
YakovL

@YakovL ya ide utama di sini adalah trik margin-top;) Saya tahu bahwa saya dapat membuat konten seperti ini tetapi akan hampir sama dengan jawaban sebelumnya di mana idenya adalah untuk mendorong footer dengan konten ... dan di sini saya ingin menghindari ini dan mendorong catatan kaki hanya dengan margin;)
Temani Afif

@YakovL flex diperlukan untuk margin: auto :) kita tidak bisa menggunakannya tanpanya ... karena margin: auto berperilaku sedikit berbeda dengan item flex kemudian memblokir item. Jika Anda menghapusnya display:flextidak akan berfungsi, Anda akan memiliki aliran elemen blok normal
Temani Afif

Ya, saya dapat melihat bahwa itu tidak akan berhasil tanpanya, tetapi saya tidak mengerti mengapa (apa yang "sedikit berbeda")
YakovL

1
@YakovL itu sederhana, menggunakan elemen blok normal, aliran selalu arah baris sehingga hanya margin kanan / kiri yang digunakan dengan otomatis yang akan bekerja (seperti margin:0 autoelemen blok pusat yang terkenal ) TETAPI kita tidak memiliki arah kolom sehingga tidak ada margin otomatis dengan atas / bawah. Flexbox memiliki kedua arah baris / kolom;). Ini adalah sedikit perbedaan, tetapi margin juga digunakan dalam flexbox untuk menyelaraskan elemen sehingga bahkan dalam arah baris Anda dapat menggunakan margin-top / bottom otomatis untuk menyelaraskan secara vertikal .. Anda dapat membaca lebih lanjut di sini: w3.org/TR/css- flexbox-1 / # auto-margin
Temani Afif

5

masukkan deskripsi gambar di sini

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/


2

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


Ini berhasil saya, namun saya menambahkan lebar: 100% ke footer.
Victor.Uduak

2

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>

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.


1

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.


1

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>


1

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 :)



0

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


0

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.


0

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/


0

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.


0

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

0

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

0

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
}

1
Apakah sintaks ini benar? Apakah posisi seharusnya statis atau tetap?
stealththeninja

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>


Script vanilla java kurang panjang dari pada plugin.
Ravinder Payal

0

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/


0

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   border: 3px solid #73AD21;
}
<body style="height:1500px">

   <h2>position: fixed;</h2>

   <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

   <div class="fixed">
      This div element has position: fixed;
   </div>

</body>


0

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.


-1

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?

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.