CSS untuk membuat footer halaman HTML tetap di bagian bawah halaman dengan ketinggian minimum, tetapi tidak tumpang tindih halaman

379

Saya memiliki halaman berikut (deadlink:) http://www.workingstorage.com/Sample.htmyang memiliki footer yang tidak dapat saya duduki di bagian bawah halaman.

Saya ingin catatan kaki

  • tetap ke bawah jendela ketika halaman pendek dan layar tidak terisi, dan
  • tetap di ujung dokumen dan turun seperti biasa ketika ada lebih dari satu layar penuh konten (alih-alih tumpang tindih konten).

CSS diwarisi dan membingungkan saya; Sepertinya saya tidak bisa mengubahnya dengan benar untuk menempatkan ketinggian minimum pada konten atau membuat catatan kaki ke bawah.

css footer Caveatrob
sumber
16
Sungguh menakjubkan bahwa ini adalah masalah umum. Mungkin di CSS4 kita akan melihat implementasi "make a nav bar" dan "make a footer" karena ini sering dicoba.
isomorfisma
1
Tidak akan pernah ada CSS4 (CSS3 hanya akan tumbuh). Saya pikir ini akan diperbaiki dengan implementasi flexbox.
Marijke Luttekes
1
Artikel bagus tentang ini: css-tricks.com/couple-takes-sticky-footer
Phil
expertsuggestion.com/css-snippets/8
Lalit Baghel

Jawaban:

345

Sebuah metode sederhana adalah dengan membuat tubuh 100%halaman Anda, dengan min-heightdari 100%juga. Ini berfungsi dengan baik jika ketinggian footer Anda tidak berubah.

Beri footer margin-negatif atas:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
Jon Winstanley
sumber
27
Ini hanya berfungsi jika Anda tahu ketinggian kaki Anda sebelumnya. Terkadang footer memiliki konten yang dinamis, atau Anda membangun kerangka kerja. Ada ide untuk footer tinggi variabel?
Costa
@Costa periksa jawaban saya di sini , untuk solusi yang bekerja dengan footer tinggi variabel.
Jose Rui Santos
untuk konten dinamis hilangkan saja "tinggi" dan footer akan beradaptasi dengan konten. Tidak diuji di semua browser
m47730
Ini mungkin diperlukan box-sizing: border-box;untuk tubuh [dan #container].
konsolebox
Ini sepertinya banyak trik aneh, ada jawaban di bawah ini yang sederhana dan tidak menggunakan trik.
Andrew Koster
166

Saya telah mengembangkan metode yang cukup mudah untuk menempelkan Footer di bagian bawah, tetapi sebagai metode yang paling umum, Anda perlu menyesuaikannya agar sesuai dengan tinggi Footer Anda.

LIHAT DEMO

Metode Flexbox:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Luaskan cuplikan

Metode di bawah ini menggunakan "trik" dengan menempatkan ::afterelemen pseudo pada body, dan mengaturnya untuk memiliki ketinggian yang tepat dari footer, sehingga akan menempati ruang yang sama persis dengan yang dilakukan footer, sehingga ketika footer absolutediposisikan di atasnya, itu akan tampak seperti footer benar-benar mengambil ruang dan menghilangkan dampak negatif dari posisi absolut itu (misalnya, menelusuri konten tubuh)

position:absolute metode: (tidak memungkinkan tinggi footer dinamis)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Luaskan cuplikan

Metode tata letak meja:

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

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Luaskan cuplikan

vsync
sumber
Sederhana dan elegan dan yang lebih penting itu berhasil. Solusi lain gagal ketika Anda mulai menambahkan div dengan display: table display: table-row display:table-cell. Namun saya merasa perlu menambahkan body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}untuk menghindari bilah gulir. Anda dapat memenuhi ini dengan menyesuaikan body:after heighttetapi saya menetapkan milik saya di rem bukan px sehingga menjadi bermasalah.
Steve Waring
3
@SteveWaring - Terima kasih. Memperbarui jawaban ini karena sudah cukup lama. Sekarang saya mendukung penggunaanflexbox
vsync
1
CSS di bawah "marka umum dasar" memiliki kesalahan kecil yang menyebabkannya tidak berfungsi (kesalahan tidak ada dalam "DEMO" yang ditautkan, yang ok). Saya mengambil kebebasan untuk memperbaikinya.
sleske
3
TERIMA KASIH! Solusi flexbox sebenarnya sederhana dan tidak menggunakan peretasan atau ukuran tetap aneh atau posisi tetap.
Andrew Koster
1
Demo ini adalah satu-satunya yang berfungsi! Fantastis, terima kasih!
Drakinite
51

Pendekatan yang sangat sederhana yang bekerja lintas browser bagus adalah ini:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
Luaskan cuplikan

Tamás Pap
sumber
34

Saya menggunakan ini untuk menempelkan footer saya ke bawah dan itu berhasil untuk saya:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Itu satu-satunya modifikasi yang harus Anda lakukan dalam HTML, tambahkan itu divdengan "allButFooter"kelas. Saya melakukannya dengan semua halaman, yang sangat pendek, saya tahu footer tidak akan menempel ke bawah, dan juga halaman cukup lama sehingga saya sudah tahu saya harus menggulir. Saya melakukan ini, sehingga saya bisa melihat bahwa itu berfungsi ok jika konten halaman dinamis.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

The "allButFooter"kelas memiliki min-heightnilai yang tergantung pada ketinggian viewport ini ( 100vhberarti 100% dari tinggi viewport) dan tinggi footer, bahwa aku sudah tahu itu 40px.

Hanya itu yang saya lakukan, dan itu bekerja dengan baik untuk saya. Saya belum mencobanya di setiap browser, hanya Firefox, Chrome dan Edge, dan hasilnya seperti yang saya inginkan. Footer menempel ke bawah, dan Anda tidak perlu mengacaukan indeks-z, posisi, atau properti lainnya. Posisi setiap elemen dalam dokumen saya adalah posisi default, saya tidak mengubahnya menjadi absolut atau tetap atau apa pun.

Bekerja dengan desain responsif

Inilah sesuatu yang ingin saya jelaskan. Solusi ini, dengan Footer yang sama dengan tinggi 40px tidak berfungsi seperti yang saya harapkan ketika saya bekerja dalam desain responsif menggunakan Twitter-Bootstrap. Saya harus mengubah nilai yang saya kurangi dalam fungsi:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Ini mungkin karena Twitter-Bootstrapdilengkapi dengan margin dan bantalannya sendiri, jadi itu sebabnya saya harus menyesuaikan nilai itu.

Saya harap ini berguna bagi kalian! Setidaknya, ini adalah solusi sederhana untuk dicoba, dan itu tidak melibatkan membuat perubahan besar pada keseluruhan dokumen.

N. Larrieux
sumber
Saya mengalami masalah dengan segala macam solusi untuk masalah ini. Solusi ini berfungsi dengan halaman saya yang memvariasikan apa yang ditampilkan di tubuh menggunakan display: noneTerima kasih. Itu bagus dan sederhana juga.
Steve Waring
setelah berjam-jam mencoba solusi hanya dua yang berhasil nl. position: fixed; bottom: 0dan yang satu ini. Solusi ini adalah yang terbaik karena footer tidak menempel ke bawah, tetapi tetap di akhir halaman yang dapat digulir.
Hmerman6006
untuk membangun jawaban Anda, Anda dapat melihatnya dengan cara lain dengan mengatur .footer {max-height: calc(100vh+40px); position: absolute}. Karena ini juga berfungsi, Anda harus tahu ukuran tubuh Anda.
Hmerman6006
29

Dari IE7 dan seterusnya Anda cukup menggunakan

#footer {
    position:fixed;
    bottom:0;
}

Lihat caniuse untuk dukungan.

Liam
sumber
77
Saya tidak ingin catatan kaki di bagian bawah ketika ada konten di luar catatan kaki. Saya ingin footer menempel ke bawah ketika tidak ada cukup, dan kemudian berkembang ke bawah seperti biasa ketika ada lebih dari satu screenful. Footer lengket memecahkan ini.
Caveatrob
@Caveatrob: Saya mengambil kebebasan untuk mengedit informasi penting ini ke dalam pertanyaan Anda, hanya untuk menghindari kesalahpahaman (untuk pembaca di masa mendatang, Anda mungkin telah memecahkan ini sementara ini :-)).
sleske
Solusi ini adalah satu-satunya yang mencetak footer ke setiap halaman dan itu sangat sederhana! Tapi saya tidak bisa membuatnya berfungsi bahwa konten tidak tumpang tindih dengan konten utama. Adakah yang punya solusi untuk ini?
Hatzen
15

Solusi sederhana yang saya gunakan, bekerja dari IE8 +

Berikan min-height: 100% pada html sehingga jika konten kurang dari halaman diam mengambil tinggi-port view penuh dan footer sticks di bagian bawah halaman. Ketika konten meningkat, footer bergeser ke bawah dengan konten dan terus menempel ke bawah.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
Sanjeev
sumber
itu bagus..tapi hanya Perbarui .pageContentWrapper {padding-bottom: 100px; / * Tinggi footer * /}
Subodh Sharma
Terima kasih banyak. mengerjakan Angular 7
Carlos Torres
Saya tidak ingin membuat bilah gulir yang tidak perlu bila memungkinkan.
Константин Ван
14

Namun, solusi lain yang sangat sederhana adalah yang ini:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

Caranya adalah dengan menggunakan display:tableuntuk seluruh dokumen dan display:table-rowdengan height:0untuk catatan kaki.

Karena footer adalah satu-satunya badan anak yang memiliki tampilan seperti table-row, ia ditampilkan di bagian bawah halaman.

Jose Rui Santos
sumber
Saya suka tabel css, tetapi mereka membuat masalah di jalur yang cukup aneh: stackoverflow.com/questions/24898115/…
Costa
1
Solusi ini tampaknya tidak sepenuhnya berfungsi - Firefox mengabaikan tinggi footer 0. Saya menggunakan tinggi 1px atau bahkan 1% sebagai gantinya. Edge, IE11, Chrome dan safari seluler puas dengan 0.
Kitet
Saya sangat suka solusi ini. Tetapi ketika saya membangun tata letak saya seperti ini, perhitungan elemen anak di browser dilakukan secara serampangan. Katakanlah kita ingin memiliki wadah di bagian atas halaman dan harus height: 100%benar-benar 100% ketika rasio viewport 1/1 (persegi). Ketika viewport menjadi lebih luas (lanskap) tinggi akan lebih dari 100% dan jika lebih sempit (potret) kurang dari 100%. Jadi tingginya sebanding dengan lebar jendela. Mencoba menyelesaikannya dengan pembungkus lain tetapi ini tidak berhasil. Seseorang punya solusi atau setidaknya petunjuk ???
Axel
@Axel Dalam versi ini saya telah menambahkan div biru di atas dengan tinggi 100% yang menempati semua tinggi (minus tinggi footer), terlepas dari lebar viewport. Saya pikir Anda mungkin memiliki CSS lain yang mengacaukan semuanya. Cobalah untuk membuat versi minimal dari masalah Anda berdasarkan jsFiddle asli saya
Jose Rui Santos
@JoseRuiSantos Terima kasih banyak atas tanggapan Anda. Tampaknya menjadi FireFox Bug. Lihat tangkapan layar
Axel
8

Solusi fleksibel yang sangat sederhana yang tidak mengasumsikan ketinggian tetap atau mengubah posisi elemen.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Dukungan Browser

Semua browser utama, kecuali IE11 dan di bawahnya.

Pastikan untuk menggunakan Autoprefixer untuk awalan yang sesuai.

Tampilkan cuplikan kode

m.spyratos
sumber
bekerja seperti pesona! bahkan untuk res lebih dari 4k footer stick di bagian bawah
Arpan Banerjee
7

Satu hal yang perlu diwaspadai adalah perangkat seluler, karena mereka menerapkan gagasan viewport dengan cara yang 'tidak biasa':

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

Karena itu, menggunakan position: fixed;(seperti yang saya lihat direkomendasikan di tempat lain) biasanya bukan cara yang tepat. Tentu saja, itu tergantung pada perilaku yang Anda cari.

Apa yang saya gunakan, dan telah bekerja dengan baik di desktop dan seluler, adalah:

<body>
    <div id="footer"></div>
</body>

dengan

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
Ben Jackson
sumber
6

Melakukan hal ini

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Anda juga dapat membaca tentang flex yang didukung oleh semua browser modern

Pembaruan : Saya membaca tentang flex dan mencobanya. Ini berhasil untuk saya. Semoga itu melakukan hal yang sama untuk Anda. Inilah cara saya menerapkannya. Berikut ini bukan ID-nya melainkan div

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

main {
    display: block;
    flex: 1 0 auto;
}

Di sini Anda dapat membaca lebih lanjut tentang flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Perlu diingat itu tidak didukung oleh versi IE yang lebih lama.

Aarth Tandel
sumber
1
Ini adalah jawaban terbaik dalam praktik. Menggunakan flex-grow: 1sesuatu di atas footer akan menjaga footer di bagian bawah dengan benar.
iBug
5

Saya baru saja menjawab pertanyaan serupa di sini:

Footer posisi di bagian bawah halaman memiliki header tetap

Saya cukup baru dalam pengembangan web, dan saya tahu ini sudah dijawab, tetapi ini adalah cara termudah yang saya temukan untuk menyelesaikannya dan saya pikir agak berbeda. Saya menginginkan sesuatu yang fleksibel karena catatan kaki aplikasi web saya memiliki ketinggian yang dinamis, saya akhirnya menggunakan FlexBox dan spacer.

  1. Mulailah dengan mengatur ketinggian html dan tubuh Anda
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Saya mengasumsikan columnperilaku untuk aplikasi kami, jika Anda perlu menambahkan header, pahlawan, atau konten apa pun yang selaras secara vertikal.

  1. Buat kelas spacer
.spacer {
    flex: 1; 
}
  1. Jadi nantinya HTML Anda bisa seperti itu 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Anda dapat bermain dengannya di sini https://codepen.io/anon/pen/xmGZQL

Camo
sumber
5

Ini dikenal sebagai footer lengket. Sebuah pencarian google untuk itu datang dengan banyak hasil. CSS Sticky Footer adalah yang saya gunakan dengan sukses. Tetapi masih ada lagi.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
Luaskan cuplikan

Sumber untuk kode ini

Paolo Bergantino
sumber
3

Metode jquery saya, yang ini menempatkan footer di bagian bawah halaman jika konten halaman kurang dari tinggi jendela, atau hanya menempatkan footer setelah konten sebaliknya:

Juga, menyimpan kode di dalam kandangnya sendiri sebelum kode lain akan mengurangi waktu yang diperlukan untuk memposisikan ulang catatan kaki.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Sam Jones
sumber
3

Saya sendiri telah melihat masalah ini. Saya telah melihat beberapa solusi dan masing-masing dari mereka memiliki masalah, sering melibatkan beberapa angka ajaib.

Jadi menggunakan praktik terbaik dari berbagai sumber saya datang dengan solusi ini:

http://jsfiddle.net/vfSM3/248/

Hal yang ingin saya capai secara khusus di sini adalah untuk mendapatkan konten utama untuk menggulir di antara footer dan header di dalam area hijau.

di sini adalah css sederhana:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
husayt
sumber
3
Saya benci situs yang dirancang seperti ini. Mengapa Anda ingin membatasi jumlah teks yang dapat saya baca pada saat yang sama? Saya tidak perlu melihat header dan footer sepanjang waktu, saya tahu di mana menemukannya ketika saya menginginkannya.
Tarmil
1
@Tarmil lihat di numerics.info . Apakah Anda melihat sekarang ketika ini bisa bermanfaat?
husayt
3

Inilah bagaimana saya memecahkan masalah yang sama

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
Luaskan cuplikan

Nemus
sumber
3 
footer {
  margin-top:calc(5% + 60px);
}

Ini berfungsi dengan baik

Karthikaeyan
sumber
2

Kustomisasi saja bagian footer

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
ruam
sumber
Tidak bekerja Itu selalu menempel ke bawah bahkan jika kita memiliki halaman yang sangat besar. Itu tidak dapat menggulir dengan semua halaman tetapi hanya menempel ke bawah.
fWd82
Tidak bekerja Footer datang di atas konten.
indolentdeveloper
1

ini dua sen saya. Sebagai perbandingan dengan solusi lain, orang tidak perlu menambahkan wadah tambahan. Karenanya solusi ini sedikit lebih elegan. Di bawah contoh kode saya akan menjelaskan mengapa ini berhasil.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

Jadi hal pertama yang kita lakukan adalah membuat wadah terbesar (html) 100%. Halaman html adalah sebesar halaman itu sendiri. Selanjutnya kita mengatur tinggi badan, itu bisa lebih besar dari 100% dari tag html, tetapi setidaknya harus sama besar, oleh karena itu kami menggunakan min-height 100%.

Kami juga membuat tubuh relatif. Relatif berarti Anda dapat memindahkan elemen blok di sekitar relatif dari posisi aslinya. Kami tidak menggunakannya di sini. Karena relatif memiliki penggunaan kedua. Setiap elemen absolut adalah mutlak untuk root (html) atau untuk orang tua / kakek nenek relatif pertama. Itulah yang kami inginkan, kami ingin footer menjadi absolut, relatif terhadap tubuh, yaitu bagian bawah.

Langkah terakhir adalah mengatur footer ke absolut dan bawah: 0, yang memindahkannya ke bagian bawah orang tua / kakek-nenek pertama yang relatif (body ofcourse).

Sekarang kita masih memiliki satu masalah untuk diperbaiki, ketika kita mengisi halaman lengkap, konten berjalan di bawah footer. Mengapa? baik, karena footer tidak lagi di dalam "aliran html", karena itu mutlak. Jadi bagaimana kita memperbaikinya? Kami akan menambahkan padding-bottom ke tubuh. Ini memastikan tubuh sebenarnya lebih besar dari kontennya.

Saya harap saya membuat banyak yang jelas untuk kalian.

David
sumber
1

Dynamic satu liner menggunakan jQuery

Semua metode CSS yang saya temui terlalu kaku. Juga, mengatur footer ke fixedbukanlah pilihan jika itu bukan bagian dari desain.

Diuji pada:

  • Chrome: 60
  • FF: 54
  • IE: 11

Dengan asumsi tata letak ini:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

Gunakan fungsi jQuery berikut:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

Apa yang dilakukan adalah mengatur min-heightuntuk #contentuntuk ketinggian jendela - ketinggian catatan kaki apa yang pernah ada pada saat itu.

Karena kami menggunakan min-height, jika #contenttinggi melebihi tinggi jendela , fungsi terdegradasi dengan anggun dan tidak berpengaruh apa-apa karena tidak diperlukan.

Lihat dalam aksi:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Luaskan cuplikan

Cuplikan yang sama di JsFiddle

Bonus:

Kita dapat mengambil ini lebih jauh dan membuat fungsi ini beradaptasi dengan mengubah ukuran ketinggian penampil dinamis seperti:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Luaskan cuplikan

Saya haz kode
sumber
1

Kamu bisa melakukan ini

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
Abdallah Abdillah
sumber
0

Cukup atur html, body, dan baris lainnya kecuali footer ke 100%. misalnya

<body>
<header></header>
<content></content>
<footer></footer>

css menjadi 

html, body, header, content{
height:100%;
}
Olatunde G.
sumber
0 
<!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>


#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 */
}
San Jaisy
sumber
0

Bagaimana dengan itu:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
novecentonove
sumber
Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan meningkatkan nilai jangka panjangnya.
β.εηοιτ.βε
-1

Saya telah menggunakan banyak proyek saya dan tidak pernah mendapat masalah apa pun :)

untuk referensi Anda, Kode dalam cuplikan 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
Luaskan cuplikan

Santosh Khalse
sumber