Footer pembilasan ke bagian bawah halaman, twitter bootstrap

306

Saya biasanya terbiasa dengan teknik pembilasan footer menggunakan css.

Tetapi saya mengalami masalah dalam mendapatkan pendekatan ini untuk bootstrap Twitter, kemungkinan besar karena bootstrap Twitter responsif. Menggunakan bootstrap Twitter saya tidak bisa mendapatkan footer untuk menyiram ke bagian bawah halaman menggunakan pendekatan yang dijelaskan dalam posting blog di atas.

css twitter-bootstrap footer Calvin Cheng
sumber

Sebelum menguji semua jawaban di bawah, harap diingat bahwa OP ingin membuatnya bekerja dengan twitter bootstrap. Karena itu bukan keharusan, twitter bootstrap bekerja dengan Jquery, apa artinya Javascript diaktifkan. Untuk alasan itu, cukup uji jawaban saya: stackoverflow.com / pertanyaan / 10099422 / ...

HenryW

4

Contoh resmi: getbootstrap.com/examples/sticky-footer-navbar/…

pengguna

1

Tautan rusak! Adakah yang bisa tolong perbaiki tautan contoh resmi?

PassionInfinite

1

@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar mungkin akan menjadi versi yang lebih lama di masa depan karena 4.0 saya kira.

Ammad Khalid

324

Menemukan potongan-potongan di sini berfungsi dengan sangat baik untuk bootstrap

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

Chuan Yeong
sumber

Ini adalah solusi terbaik yang saya coba sejauh ini. Menerima ini sebagai jawabannya.

Calvin Cheng

Hai, saya sudah menerapkan metode ini, ini berfungsi dengan baik tetapi sekarang saya punya beberapa masalah dengan menampilkan halaman di iphone (halaman diperbesar). Ada ide apa masalahnya? Berikut ini beberapa detailnya: stackoverflow.com/questions/18621090/…

pupadupa

94

Kalau-kalau Anda sudah membaca jawaban ini dan tidak menggulir ke bawah, ada baiknya mencari jawaban lain

MattyW

4

terutama yang ini: stackoverflow.com/questions/10099422/…

HenryW

1

Ini adalah metode terbaik yang saya temukan untuk Bootstrap. Untuk responsifitas perangkat, ingatlah untuk menggunakan kueri media untuk memperbarui #main dan .footer ketinggian untuk ukuran layar yang berbeda

SyntaxGoonoo

467

Ini sekarang termasuk dalam Bootstrap 2.2.1.

Bootstrap 3.x

Gunakan komponen navbar dan tambahkan .navbar-fixed-bottomkelas:

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 4.x

<div class="navbar fixed-bottom"></div>

Jangan lupa untuk menambahkan body { padding-bottom: 70px; }atau jika tidak, konten halaman dapat dicakup.

Documents: http://getbootstrap.com/components/#navbar-fixed-bottom

sanon
sumber

35

@ChuanYeong Sayangnya tidak ada navbar-static-bottom.

Lawrence Woodman

25

@ MikeCurry ia tidak bertanya tentang footer tetap, tetapi yang "mengisi" ruang kosong, jika halaman Anda tidak memiliki cukup konten untuk membuat footer tetap di bagian bawah. Jika footer Anda hanya informasi, yang diperbaiki hanya mengambil ruang berharga.

rdlu

22

Ini bukan footer lengket, karena posisi yang digunakan: tetap; yang tidak benar

Furkat U

9

Yap solusi ini hanya memerah ke bagian bawah viewport bukan bagian bawah halaman. yaitu footer selalu terlihat.

rism

3

Harus downvote jawabannya karena memberikan kebingungan. OP tidak ingin catatan kaki lengket.

HenryW

77

Contoh kerja untuk bootstrap Twitter NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Versi yang selalu diperbarui jika pengguna membuka devtools atau mengubah ukuran jendela.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

Anda memerlukan setidaknya satu elemen dengan a `#footer`

Bila tidak menginginkan bilah gulir jika isinya pas dengan layar, ubah saja nilai 10 menjadi 0
Bilah gulir akan muncul jika isinya tidak cocok dengan layar.

HenryW
sumber

9

Ya, saya juga ikut yang ini. CSS terkadang sangat bodoh. Bukannya tidak mungkin, tetapi solusi tujuan umum bisa sulit didapat, dan memperbaiki hal-hal yang mengganggu seperti ini di tata letak kami tidak boleh melakukan perjalanan untuk menumpuk pertukaran, beberapa revisi intisari, pengujian lintas penjelajah, dan akhirnya menyerah pada JS sederhana menipu. Ya, saya merasa agak kotor, tapi setidaknya berhasil.

meecect

3

setiap solusi yang saya lihat salah. Ini adalah HANYA yang benar-benar melakukan apa yang seharusnya dilakukan - tempelkan footer ke bagian bawah halaman, tanpa mengaburkan konten apa pun jika peramban diubah ukurannya.

Dave

13

itu tidak bekerja sepi seperti yang diharapkan untuk saya, masih, salah satu jawaban yang lebih baik, saya memperbaiki masalah saya dengan mengganti $('#footer').height();dengan$('#footer').outerHeight();

DarkMukke

3

Jawaban bagus! Saya punya beberapa adaptasi yang saya pikir tingkatkan di sini: stackoverflow.com/a/36385654/8207

Cory

6

Jawaban terbaik yang saya temukan. Jika Anda ingin berfungsi setelah pengubahan ukuran jendela cukup masukkan kode utama dari jawaban di dalam $(window).resize(function() {//main code goes here});dan aktifkan $(window).resize();untuk mengaturnya saat halaman dimuat.

Szymon Sadło

36

Berikut cara menerapkan ini dari halaman resmi:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Saya baru saja mengujinya sekarang dan BEKERJA HEBAT! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

Kode CSS yang relevan adalah ini:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

Leniel Maccaferri
sumber

7

Terima kasih telah memposting ini, itu jelas merupakan solusi terbaik (belum lagi satu-satunya yang bekerja) untuk proyek khusus saya, dan tentu saja itu bagus karena langsung dari proyek itu sendiri.

Cory W.

1

Saya tidak tahu apa masalahnya, tetapi saya tidak bisa menyelesaikannya tanpa menambahkan gulir ke halaman. Saya akhirnya mengubah .wrapper CSS sehingga ketinggian minimumnya adalah "calc (100% - 120px)" di mana 120px adalah ketinggian footer saya dan menghapus <div id = "push"> </div> dari html karena sepertinya tidak melakukan apa pun selain menambah tinggi ke halaman yang tidak saya butuhkan.

jammyman34

36

Untuk Sticky Footer kami menggunakan dua DIV'sdi HTML untuk efek footer sticky dasar . Tulis seperti ini:

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

sandeep
sumber

7

Dia bilang dia menggunakan Bootstrap Twitter. Apa cara termudah untuk mengintegrasikan ini ke dalam Bootstrap tanpa sepenuhnya menulis ulang HTML?

Cody Grey

1

Jika OP ingin mencapai efek Sticky Footer maka ia harus mengubah MarkUp-nya

sandeep

Terima kasih! Ini adalah satu-satunya metode yang benar-benar bekerja untuk saya di situs ASP.NET MVC5 yang menggunakan Bootstrap. +1

Yann Duran

30

Contoh resmi yang jauh lebih sederhana: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

pengguna
sumber

19

Yah saya menemukan campuran navbar-innerdan navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Tampaknya bagus dan berfungsi untuk saya

masukkan deskripsi gambar di sini

Lihat contoh di Fiddle

Maxim Shoustin
sumber

2

solusi paling sederhana dan paling elegan. Waspadai rumah membuat kode css Anda sendiri karena tidak akan kompatibel dengan bootstrap

1-14x0r

Saya menggunakan ini, dan punya masalah pada android lama (froy mungkin?) Dengan halaman yang lebih pendek dari layar. Jika tidak bekerja dengan baik pada FF, Chrome, IE11, iPhone, nexus 7.

bnieland

Sempurna dan sangat sederhana!

ramires.cabral

18

Dalam versi terbaru dari bootstrap 4.3, ini bisa dilakukan menggunakan .fixed-bottomkelas.

<div class="fixed-bottom"></div>

Inilah cara saya menggunakannya dengan catatan kaki:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Anda dapat menemukan informasi lebih lanjut di dokumentasi posisi di sini .

Mohamed Ali JAMAOUI
sumber

1

Ini masih berfungsi dengan versi resmi 4 dilepaskan.

klewis

Perhatikan bahwa contoh di getbootstrap.com/docs/4.1/examples/sticky-footer memiliki gaya line-height = 60px pada elemen footer. Ini tidak hanya tidak perlu, itu juga mencegah footer dari bekerja dengan baik jika itu adalah induk dari satu atau lebih elemen div, yang biasanya terjadi.

ScottyB

13

Jawaban HenryW baik, meskipun saya perlu beberapa penyesuaian untuk membuatnya bekerja seperti yang saya inginkan. Secara khusus yang berikut ini juga menangani:

Menghindari "kegelisahan" pada pemuatan halaman dengan terlebih dahulu menandai tidak terlihat dan pengaturan terlihat dalam javascript
Berurusan dengan browser mengubah ukuran dengan anggun
Selain itu mengatur footer kembali ke atas halaman jika browser menjadi lebih kecil dan footer menjadi lebih besar dari halaman
Fungsi tweak tinggi

Inilah yang berhasil bagi saya dengan tweak itu:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

Cory
sumber

11

Ini bekerja dengan baik untuk saya.

Tambahkan kelas ini navbar-fix-bottom ke footer Anda.

<div class="footer navbar-fixed-bottom">

Saya menggunakannya seperti ini:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

Dan itu diatur ke bawah di atas lebar penuh.

Sunting: Ini akan mengatur footer agar selalu terlihat, itu adalah sesuatu yang perlu Anda pertimbangkan.

sp_omer
sumber

10

Anda perlu membungkus .container-fluiddiv Anda agar footer lengket Anda berfungsi, Anda juga kehilangan beberapa properti di .wrapperkelas Anda . Coba ini:

Hapus tag padding-top:70pxAnda bodydan sertakan di tag Anda .container-fluid, seperti:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Kita harus melakukan ini karena menekan ke bodybawah untuk mengakomodasi navbar akhirnya mendorong footer sedikit lebih jauh (70px lebih lanjut) melewati viewport sehingga kita mendapatkan scrollbar. Kami mendapatkan hasil yang lebih baik dengan mendorong .container-fluiddiv.

Selanjutnya kita harus menghapus .wrapperkelas di luar .container-fluiddiv Anda dan membungkus #maindiv Anda dengan itu, seperti:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Footer Anda tentu saja harus keluar dari .wrapperdiv jadi hapus dari `.wrapper div dan letakkan di luar, seperti:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Setelah semuanya selesai, dorong kaki Anda lebih dekat ke .wrapperkelas dengan menggunakan margin negatif, seperti:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

Dan itu akan berhasil, meskipun Anda mungkin harus memodifikasi beberapa hal lain untuk membuatnya berfungsi ketika layar diubah ukurannya, seperti mengatur ulang ketinggian di .wrapperkelas, seperti:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

Andres Ilich
sumber

9

Ini adalah cara yang tepat untuk melakukannya dengan Twitter Bootstrap dan kelas navbar-fixed-bottom baru: (Anda tidak tahu berapa lama saya habiskan mencari ini)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Régis B.
sumber

9

Gunakan utilitas fleksibel bawaan Bootstrap 4! Inilah yang saya buat dengan menggunakan sebagian besar utilitas Bootstrap 4.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex untuk membuat div utama wadah fleksibel
.flex-column pada div utama untuk mengatur item fleksibel Anda dalam sebuah kolom
min-height: 100vh ke div utama, baik dengan atribut style atau di CSS Anda, untuk mengisi viewport secara vertikal
.flex-grow-1 pada wadah, elemen agar wadah konten utama mengambil semua ruang yang tersisa di ketinggian viewport.

EGhost57
sumber

Alih-alih min-height: 100vhyang min-vh-100kelas dari Bootstrap dapat digunakan.

ikonuk

Solusi ini bekerja sangat baik termasuk saran min-vh-100 dari @ikonuk

TGR

4

Gunakan komponen navbar dan tambahkan kelas .navbar-fixed-bottom:

<div class="navbar navbar-fixed-bottom"></div>

tambahkan tubuh

  { padding-bottom: 70px; }

File Admin3
sumber

3

untuk menangani tata letak pembatas lebar gunakan langkah-langkah berikut agar sudut tidak membulat, dan nav bar Anda akan rata ke sisi-sisi aplikasi

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

maka Anda dapat menggunakan css untuk mengganti kelas bootstrap untuk menyesuaikan tinggi, font, dan warna

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

1-14x0r
sumber

3

Anda dapat menggunakan jQuery untuk menangani ini:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

DucCuong
sumber

2

Satu-satunya yang bekerja untuk saya !:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

Ricardo
sumber

2

Teknik paling sederhana adalah menggunakan Bootstrap navbar-static-bottombersamaan dengan pengaturan div wadah utama dengan height: 100vh( persentase port tampilan CSS3 baru ). Ini akan membilas footer ke bawah.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

Pan Wangperawong
sumber

2

Diuji dengan Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

Dušan Maďar
sumber

1

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

Tinggi footer cocok dengan ukuran indentasi bagian bawah elemen pembungkus.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

Sharpless512
sumber

1

Inilah solusi untuk Bootstrap versi terbaru (4.3 saat penulisan) menggunakan Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

Dan contoh codepen: https://codepen.io/tillytoby/pen/QPdomR

Tom T
sumber

1

Per contoh Bootstrap 4.3 , jika Anda kehilangan kewarasan seperti yang saya lakukan, beginilah cara kerjanya:

Semua orang tua dari footer div harus memiliki height: 100%( h-100kelas)
Orang tua langsung dari footer perlu memiliki display: flex( d-flexkelas)
Footer perlu memiliki margin-top: auto( mt-autokelas)

Masalahnya adalah bahwa dalam kerangka front-end modern kita sering memiliki pembungkus tambahan di sekitar elemen-elemen ini.

Misalnya dalam kasus saya, dengan Angular, saya menyusun tampilan dari root aplikasi terpisah, komponen aplikasi utama, dan komponen footer - yang semuanya menambahkan elemen khusus mereka ke DOM.

Jadi, untuk membuatnya bekerja, saya harus menambahkan kelas ke elemen pembungkus ini: tambahan h-100, memindahkan d-flexsatu tingkat ke bawah, dan memindahkan mt-autosatu tingkat ke atas dari footer (jadi sebenarnya itu bukan pada kelas footer lagi, tetapi pada <app-footer>kebiasaan saya elemen).

MrValueType
sumber

Aku harus meletakkan class="h-100"ke <html>tag juga.

Kel Solaar

1

Gunakan kode ini di bootstrap kerjanya

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

sanjay
sumber

1

Solusi Bootstrap v4 +

Berikut adalah solusi yang tidak perlu memikirkan kembali struktur HTML atau tipuan CSS tambahan yang melibatkan bantalan:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Perhatikan bahwa solusi ini memungkinkan untuk footer dengan ketinggian fleksibel, yang khususnya berguna ketika merancang halaman untuk berbagai ukuran layar dengan pembungkus konten saat menyusut.

Mengapa ini berhasil?

style="height:100%;"membuat <html>tag mengambil seluruh ruang dokumen.
d-flexset kelas display:flexke <body>tag kami .
flex-columnset kelas flex-direction:columnke <body>tag kami . Anak-anaknya ( <header>, <main>, <footer>dan setiap anak langsung lainnya) sekarang selaras secara vertikal.
class h-100set height:100%ke <body>tag kita , artinya akan menutupi seluruh layar secara vertikal.
class flex-grow-1set flex-grow:1ke kami <main>, secara efektif menginstruksikannya untuk mengisi ruang vertikal yang tersisa, dengan demikian sebesar ketinggian vertikal 100% yang kami atur sebelumnya pada <body>tag kami .

Demo yang berfungsi di sini: https://codepen.io/maxencemaire/pen/VwvyRQB

Lihat https://css-tricks.com/snippets/css/a-guide-to-flexbox/ untuk informasi lebih lanjut tentang flexbox.

Kathandrax
sumber

h-100kelas tidak bekerja dengan baik, lebih baik digunakan min-vh-100.

ikonuk

@ikonuk Apa sebenarnya yang Anda maksud dengan "tidak berfungsi dengan baik"? Tolong jelaskan.

Kathandrax

Karena h-100kelas selalu tergantung pada tinggi elemen induk dan mungkin tidak bekerja pada beberapa kasus dengan benar. Karena kami ingin footer di bagian bawah viewport itu akan menjadi praktik yang baik untuk menggunakan tinggi viewport.

ikonuk

Sekali lagi, definisikan 'beberapa kasus'. Argumen Anda tentang ketergantungan orang tua berlaku sama saja min-width. Itulah sebabnya HTMLtag memiliki height100% dalam kode. Contoh berfungsi dan saya tidak melihat mengapa itu tidak akan memberikan dukungan lintas-browser untuk heightproperti CSS , yang pada akhirnya adalah apa yang diterjemahkan oleh potongan Bootstrap.

Kathandrax

Saya tidak mengatakan contoh Anda tidak berhasil. Tidak semua orang menggunakan gaya dalam HTMLtag. Dalam kasus saya, solusi Anda tidak berfungsi karena saya tidak suka menggunakan gaya dalam HTMLtag. Dan saya tidak ingin bodytag tergantung pada orang tua lain tetapi viewport. Anda tidak harus meletakkan style="height:100%;"dan h-100pada saat yang sama. Puting min-vh-100ke tubuh hanya melakukan pekerjaan dan lebih sedikit kode.

ikonuk

0

Sepertinya height:100%'rantai' sedang rusak div#main. Coba tambahkan height:100%padanya dan itu bisa membuat Anda lebih dekat ke tujuan Anda.

brains911
sumber

0

Di sini Anda akan menemukan pendekatan dalam HAML ( http://haml.info ) dengan navbar di bagian atas dan catatan kaki di bagian bawah halaman:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

Hannes
sumber

Bisakah Anda menguraikan sedikit jawaban Anda? Jawaban khusus kode biasanya tidak disarankan.

Qix - MONICA DISEBUTKAN

1

Oke, apa yang ingin kamu ketahui?

Hannes

Saya tidak perlu mengetahuinya, tetapi seseorang yang datang ke situs ini nanti mungkin tidak tahu persis mengapa kode jawaban Anda melakukan apa yang dilakukannya.

Qix - MONICA DISEBUTKAN

Mungkin saya harus menghapusnya. Saya menulis intro baru. :)

Hannes

0

Tetap sederhana.

footer {
  bottom: 0;
  position: absolute;
}

Anda mungkin perlu juga mengimbangi ketinggian footer dengan menambahkan margin-bottomsetara dengan tinggi footer ke body.

obfk
sumber

0

Berikut ini contoh menggunakan css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

biola

Pemenang
sumber

0

Beginilah cara bootstrap melakukannya:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Cukup gunakan sumber halaman dan Anda harus dapat melihatnya. Jangan lupa <div id="wrap">yang atas.

Bren
sumber

0

solusi lain yang mungkin, hanya menggunakan kueri media

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

GeorgeWL
sumber

Footer pembilasan ke bagian bawah halaman, twitter bootstrap

Jawaban:

Anda memerlukan setidaknya satu elemen dengan a #footer

Solusi Bootstrap v4 +

Mengapa ini berhasil?

Anda memerlukan setidaknya satu elemen dengan a `#footer`