İşaretlememde hem sağ hem de sol div'i temizleyen bir altbilgiyle basit bir 2 sütunlu düzenim var. Benim sorunum altbilgi tüm tarayıcılarda sayfanın altında kalmak alamıyorum olmasıdır. İçerik altbilgiyi aşağı itiyorsa çalışır, ancak durum her zaman böyle değildir.

Yapışkan altbilgi almak için:

1. İçeriğiniz için bir <div>sahip class="wrapper"olun.

2. Sağ önce kapanış </div>ait wrapperyerin <div class="push"></div>.

3. Sağ sonra kapanış </div>ait wrapperyerin <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 */
}

CSS vh birimleri kullanın!

Muhtemelen yapışkan bir altbilgi hakkında gitmenin en bariz ve hackli olmayan yolu yeni css viewport birimlerini kullanmak olacaktır .

Örneğin, aşağıdaki basit biçimlendirmeyi ele alalım:

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

Üstbilgi 80 piksel yüksekliğinde ve altbilgi 40 piksel yüksekse, yapışkan altbilgimizi içerik divinde tek bir kuralla yapabiliriz :

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

Bu şu anlama gelir: içerik div yüksekliğinin, görünüm yüksekliğinin en az % 100'ü, üstbilgi ve altbilginin birleşik yükseklikleri olsun.

Bu kadar.

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

... ve işte aynı kod, içerik div'indeki birçok içerikle şu şekilde çalışır:

* {
    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) Üstbilgi ve altbilginin yüksekliği bilinmelidir

2) IE (IE8-) ve Android (4.4-) 'ün eski sürümleri, görünüm birimlerini desteklemez. ( caniuse )

3) Bir zamanlar webkit, bir calc kuralı içindeki viewport birimleriyle ilgili bir sorun yaşadı. Bu gerçekten düzeltildi ( buraya bakın ), bu yüzden orada bir sorun yok. Bununla birlikte, herhangi bir nedenden dolayı calc kullanmaktan kaçınmak istiyorsanız, negatif kenar boşlukları kullanarak ve kutu boyutlandırma ile dolgu yapabilirsiniz -

Şöyle ki:

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

Yapışkan altbilgi display: flex

Çözüm Philip Walton'un yapışkan altbilgisinden esinlenmiştir .

açıklama

Bu çözüm yalnızca şunlar için geçerlidir :

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

Bu dayanan flexgörüntü yararlanarak, flex-growbir element sağlar özelliği, büyüme ya da içinde yüksekliği veya genişliğinden zaman ( flow-directionayarlandığında ya columnveyarow sırasıyla) kap içinde ekstra alan işgal etmek.

vhBirimi de kaldıracağız , burada 1vhşu şekilde tanımlanır :

Görünüm yüksekliğinin 1 / 100'ü

Bu nedenle, bir yüksekliğe, 100vhbir öğeye tüm görünümün yüksekliğini yaymasını söylemenin kısa bir yoludur.

Web sayfanızı şu şekilde yapılandırabilirsiniz:

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

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

Altbilginin sayfanın altına yapışmasını sağlamak için, altbilgi sayfanın altına itmek için gövde ve altbilgi arasındaki boşluğun büyümesini istersiniz.

Bu nedenle düzenimiz:

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

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

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

uygulama

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>

Onunla JSFiddle'da oynayabilirsiniz .

Safari tuhaflıkları

Safari'nin, mülkün , içeriği görüntülemek için gereken minimum yükseklikten daha fazla küçülmesine izin veren kusurlu bir uygulamasına sahipflex-shrink olduğunu unutmayın. Bu sorunu gidermek için yukarıdaki örnekte ve flex-shrinköğesinde özelliği açıkça 0 olarak ayarlamanız gerekir :.contentfooter

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

position: absoluteAltbilgiyi sayfanın altına yerleştirmek için aşağıdakileri kullanabilirsiniz , ancak daha sonra margin-bottomaltbilginin asla tıkanmaması için 2 sütununuzun uygun olduğundan emin olun .

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

İşte cazibe gibi çalışan jQuery ile bir çözüm. Pencerenin yüksekliğinin gövdenin yüksekliğinden daha büyük olup olmadığını kontrol eder. Öyleyse, telafi etmek için altbilginin kenar boşluğunu değiştirir. Firefox, Chrome, Safari ve Opera'da test edildi.

$( function () {

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

});

Altbilginizde zaten bir kenar boşluğu (örneğin, 50 piksel) varsa, aşağıdakiler için son bölümü değiştirmeniz gerekir:

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

Şunun için CSS'yi ayarlayın #footer:

position: absolute;
bottom: 0;

Daha sonra eklemeniz gerekecektir paddingveya marginaramalarınızdan altına #sidebarve #contentyüksekliğini maç için #footerya zaman örtüşme,#footer onları kapsayacaktır.

Ayrıca, doğru hatırlıyorum, IE6 bottom: 0CSS ile ilgili bir sorun var . IE6 için bir JS çözümü kullanmanız gerekebilir (IE6'yı önemsiyorsanız).

@Gcedo'ya benzer bir çözüm, ancak altbilgiyi aşağı itmek için ara içerik eklemeye gerek kalmadan. margin-top:autoAltbilgiye basitçe ekleyebiliriz ve yüksekliği, yukarıdaki içeriğin yüksekliğine veya yüksekliğine bakılmaksızın sayfanın altına itilir.

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

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

Bazen kendimle bununla mücadele ettim ve her zaman tüm bu div'ların kendi içindeki çözümünün dağınık bir çözüm olduğunu buldum. Biraz uğraştım ve kişisel olarak bunun işe yaradığını öğrendim ve kesinlikle en basit yollardan biri:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

Bu konuda ne gibi hiçbir ekstra HTML uygulanması gerekmesidir. Bu CSS'yi ekleyebilir ve ardından HTML'nizi istediğiniz zaman yazabilirsiniz

Yana Izgara çözüm henüz bildirilmemiştir, burada sadece iki ile olan bildirimleri için üst öğesine biz alırsak, height: 100%ve margin: 0hafife:

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

Eşyalar, çapraz eksen boyunca hizalama kabı içinde eşit olarak dağıtılır. Her bitişik öğe çifti arasındaki boşluk aynıdır. İlk öğe ana başlangıç ​​kenarıyla aynı hizadadır ve son öğe ana uç kenarıyla aynı hizadadır.

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>

Sayfanın altına hizalanmış duyarlı bir altbilgi arıyorsanız, bu, her zaman görünüm alanı yüksekliğinin% 80'inin üst kenar boşluğunu koruyan hile yapmalıdır.

Aşağıdaki adımları kullanarak herhangi bir çözünürlükte yapışkan altbilgi div oluşturmak için mutlak konumlandırma ve z-endeksi kullanın:

• position: absolute; bottom: 0;İstediğiniz yükseklikte ve bir altbilgi div öğesi oluşturun
• İçerik alt ve pencere alt arasına boşluk eklemek için altbilginin dolgusunu ayarlayın
• divGövde içeriğini tamamlayan bir kap oluşturunposition: relative; min-height: 100%;
• Ana içeriğe divaltbilginin yüksekliğine ve artı dolgusuna eşit alt dolgu ekleyin
• Altbilgi kırpılmışsa altbilgiyi z-indexkaptan daha büyük bir değere ayarlayındiv

İşte bir örnek:

    <!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>

Bu soru için gördüğüm cevapların birçoğu tıknaz, uygulanması zor ve verimsiz, bu yüzden bir çekim yapacağımı ve sadece küçük bir css ve html olan kendi çözümümü bulacağımı düşündüm.

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>

Bu, altbilginin yüksekliğini ayarlayıp daha sonra sayfanın hala altbilgi ile olabileceği minimum yüksekliği hesaplamak için css calc kullanarak çalışır, bu bazı insanlara yardımcı olur umarım :)

Bir çözüm, kutular için minimum yüksekliği ayarlamak olacaktır. Ne yazık ki IE (sürpriz) tarafından iyi desteklenmiyor gibi görünüyor .

Bu saf css çözümlerinin hiçbiri, dinamik olarak yeniden boyutlandırılan içerikle (en azından firefox ve Safari'de) düzgün çalışmaz; örneğin, div div, arka plan ve sayfa bölmesinde yeniden boyutlandırma (birkaç satır ekleyerek) tablosunda bir arka plan varsa, tablo stil alanının altından yapışabilir, yani hem yazı tipi rengi hem de arka plan rengi beyaz olduğu için tablonun yarısını siyah tema üzerine beyaz ve tablonun yarısını beyaza sahip olabilirsiniz. Temel olarak themeroller sayfaları ile düzeltilemez.

İç içe div çok sütunlu düzen çirkin bir hack'tir ve altbilgiyi yapıştırmak için% 100 min yükseklikte gövde / konteyner div daha çirkin bir hack'tir.

Denediğim tüm tarayıcılarda çalışan tek komut dosyası olmayan çözüm: thead (başlık için) / tfoot (altbilgi için) / tbody (herhangi bir sayıda sütun için td) ve% 100 yüksekliğe sahip çok daha basit / kısa bir tablo. Ama bu semantik ve SEO dezavantajları algıladı (tfoot tbody önce görünmelidir. ARIA rolleri olsa iyi arama motorlarına yardımcı olabilir).

Birden fazla insan bu basit sorunun cevabını burada ortaya koydu, ancak eklediğim bir şey var, yanlış yaptığımı anlayana kadar ne kadar sinirli olduğumu düşünüyoruz.

Daha önce de belirtildiği gibi, bunu yapmanın en kolay yolu böyledir ..

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

Ancak, muhtemelen varsayılan olduğundan, yazılarda belirtilmeyen özellik konumdur: statik gövde etiketindeki . Pozisyon göreceli çalışmaz!

Wordpress temam varsayılan gövde ekranını geçersiz kıldı ve iğrenç derecede uzun bir süre beni şaşırttı.

Biliyorum eski bir iş parçacığı, ancak duyarlı bir çözüm arıyorsanız, bu jQuery ek yardımcı olacaktır:

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

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

Tam kılavuzu şu adreste bulabilirsiniz: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Çok basit bir kütüphane oluşturdum https://github.com/ravinderpayal/FooterJS

Kullanımı çok basit. Kitaplığı ekledikten sonra, bu kod satırını çağırmanız yeterlidir.

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

Altbilgiler, farklı parametre / id ile yukarıdaki fonksiyonun geri çağrılmasıyla dinamik olarak değiştirilebilir.

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

Not: - Herhangi bir CSS'yi değiştirmek veya eklemek zorunda değilsiniz. Kütüphane dinamiktir, bu sayfa yüklendikten sonra ekran yeniden boyutlandırılsa bile altbilginin konumunu sıfırlayacağını gösterir. Bu kitaplığı oluşturdum, çünkü CSS sorunu bir süre çözüyor, ancak ekranın boyutu önemli ölçüde değiştiğinde, masaüstünden tablete veya tersi durumda, ya içeriğin üzerine biniyorlar veya artık yapışkan kalmıyorlar.

Başka bir çözüm CSS Medya Sorgularıdır, ancak bu kütüphane otomatik olarak çalışır ve tüm temel JavaScript destekleyici tarayıcı tarafından desteklenirken, farklı boyutlardaki ekranlar için farklı CSS stilleri el ile yazmanız gerekir.

CSS çözümünü düzenle :

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

Şimdi, ekranın yüksekliği içerik uzunluğunuzdan fazlaysa, altbilgiyi alta sabitleriz ve eğer değilse, görüntülemek için kaydırmanız gerektiğinde ekranın en sonunda otomatik olarak görünür.

Ve JavaScript / kütüphane birinden daha iyi bir çözüm gibi görünüyor.

Daha önce bu sayfada önerilen çözümlerle hiç şansım yoktu ama sonunda bu küçük numara işe yaradı. Başka bir olası çözüm olarak ekleyeceğim.

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

Flexbox çözümü

Doğal üstbilgi ve altbilgi yükseklikleri için esnek yerleşim tercih edilir. Bu esnek çözüm, modern tarayıcılarda test edilmiştir ve aslında IE11'de :) çalışır.

JS Fiddle'ı görün .

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

Benim için onu görüntülemenin en güzel yolu (altbilgi) tabana yapışmaktır ancak içeriği her zaman kapsamamaktadır:

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

jQuery ÇAPRAZ TARAYICI ÖZEL FİŞ - $ .footerBottom ()

Veya benim yaptığım gibi jQuery kullanın ve altbilgi yüksekliğinizi autoveya olarak ayarlayınfix istediğiniz gibi ayarlayın, yine de çalışır. bu eklenti jQuery seçicilerini kullanır, böylece çalışmasını sağlamak için jQuery kütüphanesini dosyanıza eklemeniz gerekir.

Eklentiyi nasıl çalıştıracağınız aşağıda açıklanmıştır. JQuery'i içe aktarın, bu özel jQuery eklentisinin kodunu kopyalayın ve jQuery'yi içe aktardıktan sonra içe aktarın! Çok basit ve basit ama önemlidir.

Bunu yaptığınızda, tek yapmanız gereken bu kodu çalıştırmaktır:

$.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"}

bunu belgeye hazır etkinliğin içine yerleştirmeye gerek yoktur. Olduğu gibi iyi çalışır. Sayfa yüklendiğinde ve pencere yeniden boyutlandırıldığında altbilginizin konumunu yeniden hesaplar.

İşte anlamanız gerekmeyen eklentinin kodu. Sadece nasıl uygulanacağını bilin. İşi sizin için yapar. Ancak, nasıl çalıştığını bilmek istiyorsanız, sadece kodu inceleyin. Senin için yorum bıraktım.

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

Esnek çözümler benim için altbilgiyi yapışkan hale getirdiğinde çalıştı, ancak maalesef gövdeyi esnek düzen kullanacak şekilde değiştirmek sayfa düzenlerimizin bir kısmını değiştirdi, daha iyisi için değil. Sonunda benim için işe yarayan şuydu:

    jQuery(document).ready(function() {

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

});

Bunu https://css-tricks.com/couple-takes-sticky-footer/ adresinde ctf0'ın yanıtından aldım

Sabit pozisyonu kullanarak ve sizi rahatsız edici bir şekilde mobilde takip etmek istemiyorsanız, bu benim için şimdiye kadar çalışıyor gibi görünüyor.

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

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

HTML'yi önce min-height: 100%;ve position: relative;sonra position: absolute; bottom: 0; left: 0;altbilgiye ayarlayın. Daha sonra altbilginin vücuttaki son öğe olduğundan emin oldum.

Bunun başkaları için işe yaramadığını ve nedenini bize bildirin. Bu sıkıcı tarz korsanların, düşünmediğim çeşitli koşullar arasında garip davranabileceğini biliyorum.

İçeriğin ve kenar çubuğunun çevresine bir kapsayıcı div (taşma: otomatik) koymayı deneyin.

Bu işe yaramazsa, altbilginin düzgün görüntülenmediği ekran görüntüleriniz veya örnek bağlantılarınız var mı?