Mam prosty 2-kolumnowy układ ze stopką, która usuwa znaczniki z prawej i lewej div. Mój problem polega na tym, że nie mogę uzyskać stopki, aby pozostać na dole strony we wszystkich przeglądarkach. Działa, jeśli zawartość przesuwa stopkę w dół, ale nie zawsze tak jest.

Aby uzyskać lepką stopkę:

1. Zrób <div>z class="wrapper"treścią.

2. Tuż przed zamknięciem </div>w wrappermiejscu o <div class="push"></div>.

3. Tuż po zamknięciu </div>części wrapperumieścić <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 */
}

Używaj jednostek CSS vh!

Prawdopodobnie najbardziej oczywistym i nieskrępowanym sposobem na obejście lepkiej stopki byłoby skorzystanie z nowych jednostek rzutni css .

Weźmy na przykład następujące proste znaczniki:

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

Jeśli nagłówek ma na przykład wysokość 80 pikseli, a stopka ma wysokość 40 pikseli, możemy uczynić naszą lepką stopkę za pomocą jednej reguły na div div:

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

Co oznacza: niech wysokość div zawartości będzie wynosić co najmniej 100% wysokości rzutni minus połączone wysokości nagłówka i stopki.

Otóż ​​to.

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

... a oto jak ten sam kod działa z dużą ilością treści w div treści:

* {
    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) Wysokość nagłówka i stopki musi być znana

2) Stare wersje IE (IE8-) i Android (4.4-) nie obsługują jednostek rzutni. ( caniuse )

3) Dawno, dawno temu webkit miał problem z jednostkami rzutni w ramach reguły obliczania. Naprawdę zostało to naprawione ( patrz tutaj ), więc nie ma problemu. Jeśli jednak z jakiegoś powodu chcesz uniknąć używania kalkulatora, możesz obejść ten problem, używając ujemnych marginesów i marginesów z dopasowaniem rozmiaru pudełka -

Tak jak:

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

Lepka stopka z display: flex

Rozwiązanie inspirowane lepką stopą Philipa Waltona .

Wyjaśnienie

To rozwiązanie jest ważne tylko dla :

• Chrome ≥ 21,0
• Firefox ≥ 20,0
• Internet Explorer ≥ 10
• Safari ≥ 6.1

Opiera się na flexwyświetlaczu , wykorzystując flex-growwłaściwość, która pozwala elementowi rosnąć w wysokości lub szerokości (gdy flow-directionjest ustawiony na jeden columnlub rowodpowiednio), aby zajmować dodatkową przestrzeń w pojemniku.

Będziemy wykorzystywać również vhjednostkę, gdzie 1vhjest zdefiniowana jako :

1/100 wysokości rzutni

Dlatego wysokość 100vhjest zwięzłym sposobem na powiedzenie elementowi, aby obejmował całą wysokość rzutni.

Oto jak ustrukturyzowałbyś swoją stronę internetową:

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

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

Aby stopka przylegała do dolnej części strony, chcesz, aby przestrzeń między ciałem a stopką rosła tyle, ile potrzeba, aby przesunąć stopkę na dole strony.

Dlatego nasz układ staje się:

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

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

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

Realizacja

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>

Możesz grać z nim na JSFiddle .

Dziwactwa Safari

Należy pamiętać, że Safari ma wadliwą implementację tej flex-shrinkwłaściwości , która umożliwia kurczenie się elementów o więcej niż minimalna wysokość wymagana do wyświetlenia zawartości. Aby rozwiązać ten problem, trzeba będzie ustawić flex-shrinkwłaściwość wyraźnie 0 do .contenta footerw powyższym przykładzie:

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

Możesz użyć polecenia position: absoluteponiżej, aby umieścić stopkę na dole strony, ale upewnij się, że w 2 kolumnach jest odpowiednia, margin-bottomaby stopka nigdy nie była zasłonięta.

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

Oto rozwiązanie z jQuery, które działa jak urok. Sprawdza, czy wysokość okna jest większa niż wysokość ciała. Jeśli tak, to zmienia margines górnej części stopki, aby to zrekompensować. Testowane w Firefox, Chrome, Safari i Opera.

$( function () {

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

});

Jeśli stopka ma już margines (na przykład 50 pikseli), musisz zmienić ostatnią część dla:

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

Ustaw CSS dla #footer:

position: absolute;
bottom: 0;

Będziesz wtedy musiał dodać a paddinglub marginna dole swojego #sidebari #contentdopasować wysokość #footerlub kiedy będą się pokrywać, #footerpokryje je.

Ponadto, jeśli dobrze pamiętam, IE6 ma problem z bottom: 0CSS. Być może będziesz musiał użyć rozwiązania JS dla IE6 (jeśli zależy ci na IE6).

Podobne rozwiązanie do @gcedo, ale bez potrzeby dodawania treści pośredniej w celu przesunięcia stopki w dół. Możemy po prostu dodać margin-top:autodo stopki, która zostanie przesunięta na dół strony, niezależnie od jej wysokości lub wysokości treści powyżej.

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

Źródło: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Czasami zmagałem się z tym i zawsze uważałem, że rozwiązanie z tymi wszystkimi divami w sobie było nieuporządkowanym rozwiązaniem. Właśnie się z tym pogubiłem i osobiście odkryłem, że to działa i na pewno jest to jeden z najprostszych sposobów:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

Podoba mi się to, że nie trzeba stosować dodatkowego HTML. Możesz po prostu dodać ten CSS, a następnie napisać kod HTML, jak tylko chcesz

Ponieważ rozwiązanie Grid nie zostało jeszcze przedstawione, oto tylko dwie deklaracje dla elementu nadrzędnego , jeśli weźmiemy height: 100%i margin: 0za pewnik:

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

Elementy są równomiernie rozmieszczone w pojemniku wyrównującym wzdłuż osi poprzecznej. Odstępy między każdą parą sąsiednich elementów są takie same. Pierwszy przedmiot jest wyrównany z krawędzią głównego startu, a ostatni przedmiot jest zrównany z krawędzią głównego końca.

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>

To powinno załatwić sprawę, jeśli szukasz elastycznej stopki wyrównanej u dołu strony, która zawsze utrzymuje górny margines 80% wysokości rzutni.

Użyj pozycjonowania bezwzględnego i indeksu Z, aby utworzyć lepką stopkę div w dowolnej rozdzielczości, wykonując następujące czynności:

• Utwórz stopkę div z position: absolute; bottom: 0;żądaną wysokością
• Ustaw dopełnienie stopki, aby dodać spacje między dolną krawędzią zawartości a dolną krawędzią okna
• Utwórz pojemnik, divktóry będzie zawijał treśćposition: relative; min-height: 100%;
• Dodaj dolne wypełnienie do głównej zawartości, divktóra jest równa wysokości plus wypełnienie stopki
• Ustaw z-indexstopkę większą niż kontener, divjeśli stopka jest przycięta

Oto przykład:

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

Na to pytanie wiele odpowiedzi, które widziałem, są niezgrabne, trudne do wdrożenia i nieefektywne, więc pomyślałem, że spróbuję i wymyślę własne rozwiązanie, które jest tylko odrobiną css i 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>

działa to poprzez ustawienie wysokości stopki, a następnie za pomocą css calc, aby obliczyć minimalną wysokość strony z stopką wciąż na dole, mam nadzieję, że to pomoże niektórym osobom :)

Jednym rozwiązaniem byłoby ustawienie minimalnej wysokości skrzynek. Niestety wydaje się, że nie jest dobrze obsługiwany przez IE (niespodzianka).

Żadne z tych czystych rozwiązań css nie działa poprawnie z dynamicznym zmienianiem rozmiaru treści (przynajmniej w Firefoxie i Safari), np. Jeśli masz ustawione tło w polu div kontenera, strona, a następnie tabela rozmiarów (dodając kilka wierszy) wewnątrz div, tabela może wystawać poza dolną część stylizowanego obszaru, tzn. możesz mieć połowę stołu w kolorze białym na czarnym motywie, a połowę stołu całkowicie białą, ponieważ zarówno kolor czcionki, jak i kolor tła są białe. Jest to w zasadzie niemożliwe do naprawienia na stronach z tematami.

Wielokolumnowy układ zagnieżdżonych elementów div jest brzydkim hakiem, a element 100% wysokości ciała / kontenera do przyklejania stopki to brzydszy hack.

Jedyne rozwiązanie bez skryptów, które działa na wszystkich przeglądarkach, które wypróbowałem: znacznie prostsza / krótsza tabela z thead (dla nagłówka) / tfoot (dla stopki) / tbody (td dla dowolnej liczby kolumn) i 100% wysokości. Ale to dostrzegło wady semantyczne i SEO (tfoot musi pojawić się przed innymi. Role ARIA mogą jednak pomóc przyzwoitym wyszukiwarkom).

Wiele osób umieściło tutaj odpowiedź na ten prosty problem, ale muszę dodać jedną rzecz, biorąc pod uwagę, jak byłem sfrustrowany, dopóki nie zorientowałem się, co robię źle.

Jak wspomniano, najprostszym sposobem na zrobienie tego jest…

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

Jednak właściwość niewymieniona w postach, prawdopodobnie dlatego, że zwykle jest domyślna, to pozycja: statyczna na znaczniku body. Pozycja względna nie będzie działać!

Mój motyw Wordpress zastąpił domyślny wygląd ciała i wprowadzał mnie w błąd przez długi czas.

Stary wątek, który znam, ale jeśli szukasz responsywnego rozwiązania, ten dodatek jQuery pomoże:

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

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

Pełny przewodnik można znaleźć tutaj: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Stworzyłem bardzo prostą bibliotekę https://github.com/ravinderpayal/FooterJS

Jest bardzo prosty w użyciu. Po dołączeniu biblioteki wystarczy wywołać ten wiersz kodu.

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

Stopki można dynamicznie zmieniać, przywołując powyższą funkcję z innym parametrem / id.

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

Uwaga: - Nie musisz zmieniać ani dodawać żadnych CSS. Biblioteka jest dynamiczna, co oznacza, że ​​nawet jeśli rozmiar ekranu zostanie zmieniony po załadowaniu strony, zresetuje pozycję stopki. Stworzyłem tę bibliotekę, ponieważ CSS rozwiązuje problem przez jakiś czas, ale gdy rozmiar wyświetlacza zmienia się znacząco, z pulpitu na tablet lub odwrotnie, albo nakładają się na treść, albo nie są już lepkie.

Innym rozwiązaniem są zapytania mediów CSS, ale musisz ręcznie napisać różne style CSS dla różnych rozmiarów ekranów, podczas gdy ta biblioteka działa automatycznie i jest obsługiwana przez wszystkie podstawowe przeglądarki obsługujące JavaScript.

Edytuj rozwiązanie 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;
    }
}

Teraz, jeśli wysokość wyświetlacza jest większa niż długość treści, stopka zostanie przymocowana do dołu, a jeśli nie, pojawi się automatycznie na samym końcu wyświetlacza, gdy trzeba ją przewinąć, aby ją wyświetlić.

I wydaje się lepsze rozwiązanie niż JavaScript / biblioteka.

Nie miałem wcześniej szczęścia z rozwiązaniami zaproponowanymi na tej stronie, ale potem ta mała sztuczka zadziałała. Uwzględnię to jako inne możliwe rozwiązanie.

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

Rozwiązanie Flexbox

Układ Flex jest preferowany dla naturalnych wysokości hedera i stopki. To elastyczne rozwiązanie jest testowane w nowoczesnych przeglądarkach i faktycznie działa :) w IE11.

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

Dla mnie najładniejszym sposobem wyświetlania (stopki) jest przyklejanie się do dołu, ale nie zakrycie przez cały czas treści:

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

jQuery CROSS BROWSER CUSTOM PLUGIN - $ .footerBottom ()

Lub użyj jQuery tak jak ja i ustaw wysokość stopki na autolub dofix , cokolwiek zechcesz, i tak zadziała. Ta wtyczka używa selektorów jQuery, więc aby działała, musisz dołączyć bibliotekę jQuery do swojego pliku.

Oto jak uruchamiasz wtyczkę. Zaimportuj jQuery, skopiuj kod niestandardowej wtyczki jQuery i zaimportuj go po zaimportowaniu jQuery! To jest bardzo proste i podstawowe, ale ważne.

Po wykonaniu tej czynności wystarczy uruchomić następujący kod:

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

nie ma potrzeby umieszczania go w zdarzeniu gotowości dokumentu. Będzie działał dobrze. Ponownie obliczy pozycję stopki po załadowaniu strony i zmianie rozmiaru okna.

Oto kod wtyczki, którego nie musisz rozumieć. Po prostu wiem, jak to zaimplementować. Wykonuje pracę za Ciebie. Jeśli jednak chcesz wiedzieć, jak to działa, po prostu przejrzyj kod. Zostawiłem ci komentarze.

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

Rozwiązania flex działały dla mnie tak mocno, że stopka była lepka, ale niestety zmiana treści w celu użycia układu flex spowodowała zmianę niektórych układów stron, i to nie na lepsze. W końcu zadziałało dla mnie:

    jQuery(document).ready(function() {

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

});

Mam to z odpowiedzi ctf0 na https://css-tricks.com/couple-takes-sticky-footer/

Jeśli nie chcesz, aby ustawiono pozycję i podążasz za irytującym na telefonie komórkowym, wydaje mi się, że do tej pory działało.

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

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

Wystarczy ustawić html min-height: 100%;i position: relative;, następnie position: absolute; bottom: 0; left: 0;na stopce. Następnie upewniłem się, że stopka jest ostatnim elementem w ciele.

Daj mi znać, jeśli to nie zadziała dla nikogo innego i dlaczego. Wiem, że te nudne hacki mogą zachowywać się dziwnie w różnych okolicznościach, o których nawet nie myślałem.

Spróbuj umieścić div kontenera (z przepełnieniem: auto) wokół zawartości i paska bocznego.

Jeśli to nie zadziała, czy masz jakieś zrzuty ekranu lub przykładowe linki, w których stopka nie jest poprawnie wyświetlana?