379

Miałem następującą stronę (deadlink:), http://www.workingstorage.com/Sample.htmktóra ma stopkę, której nie mogę ustawić na dole strony.

Chcę stopkę

trzymać się dolnej części okna, gdy strona jest krótka, a ekran nie jest wypełniony, oraz
pozostań na końcu dokumentu i przejdź normalnie w dół, gdy jest więcej niż zawartość ekranu (zamiast nakładania się treści).

CSS jest dziedziczony i wprawia mnie w osłupienie; Nie mogę tego odpowiednio zmienić, aby ustawić minimalną wysokość zawartości lub sprawić, że stopka zejdzie na dół.

css footer Caveatrob
źródło

16

To niesamowite, że jest to tak powszechny problem. Być może w CSS4 zobaczymy implementacje „zrób pasek nawigacji” i „zrób stopkę”, ponieważ są one tak często podejmowane.

izomorfizmy

1

Nigdy nie będzie CSS4 (CSS3 będzie się po prostu powiększać). Myślę, że zostanie to naprawione dzięki implementacji flexbox.

Marijke Luttekes

1

Doskonały artykuł na ten temat: css-tricks.com/couple-takes-sticky-footer

Phil

expertuggestion.com/css-snippets/8

Lalit Baghel

345

Prostym sposobem jest, aby ciało 100%swojej stronie, z min-heightod 100%zbyt. Działa to dobrze, jeśli wysokość stopki się nie zmienia.

Daj stopce ujemny margines na górze:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Jon Winstanley
źródło

27

Działa to tylko wtedy, gdy z góry znasz wysokość stopki. Czasami stopki zawierają dynamiczną treść lub budujesz strukturę. Jakieś pomysły na stopki o zmiennej wysokości?

Costa

@ Koszt sprawdź moją odpowiedź tutaj , aby znaleźć rozwiązanie, które działa ze stopkami o zmiennej wysokości.

Jose Rui Santos,

w przypadku treści dynamicznych wystarczy pominąć „wysokość”, a stopka dostosuje się do treści. Nie przetestowano we wszystkich przeglądarkach

m47730,

Może to wymagać box-sizing: border-box;od ciała [i #container].

konsolebox

To wygląda na wiele dziwnych sztuczek, poniżej znajdują się odpowiedzi, które są proste i nie używają żadnych sztuczek.

Andrew Koster,

164

Opracowałem dość łatwą metodę przyklejania stopki na dole, ale jako najpopularniejsze metody, musisz ją dostosować, aby dopasowała się do wysokości stopki.

ZOBACZ DEMO

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

Rozwiń fragment kodu

Poniższa metoda wykorzystuje „sztuczkę” polegającą na umieszczeniu ::afterpseudoelementu na bodyi ustawieniu jej na dokładną wysokość stopki, dzięki czemu zajmie dokładnie taką samą przestrzeń, jak stopka, więc gdy stopka zostanie absolutenad nią ustawiona, wyglądałoby na to, że stopka naprawdę zajmuje przestrzeń i eliminuje negatywne skutki jej bezwzględnego pozycjonowania (na przykład przeglądanie zawartości ciała)

`position:absolute` Metoda: (nie zezwala na dynamiczną wysokość stopki)

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>

Rozwiń fragment kodu

Metoda układu tabeli:

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>

Rozwiń fragment kodu

vsync
źródło

Prosty i elegancki, a co ważniejsze, działa. Inne rozwiązania zawodzą, gdy zaczynasz dodawać pliki div display: table display: table-row display:table-cell. Stwierdziłem jednak, że muszę dodać, body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}aby uniknąć paska przewijania. Możesz to załatwić, dostosowując, body:after heightale określam mój w rem, a nie w px, więc staje się to problematyczne.

Steve Waring

3

@ SteveWaring - dziękuję. Zaktualizowałem tę odpowiedź, ponieważ była dość stara. Teraz jestem za używaniemflexbox

vsync

1

CSS pod „podstawowym wspólnym znacznikiem” miał mały błąd, który spowodował, że nie działał (błąd nie występował w połączonym „DEMO”, co jest w porządku). Pozwoliłem sobie to naprawić.

sleske,

3

DZIĘKUJĘ CI! Rozwiązanie Flexbox jest w rzeczywistości proste i nie używa hacków, dziwnych stałych rozmiarów ani stałych pozycji.

Andrew Koster,

1

To demo jest jedynym, które działa! Fantastycznie, dziękuję!

Drakinite

51

Bardzo proste podejście, które działa świetnie w różnych przeglądarkach, jest następujące:

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>

Rozwiń fragment kodu

Tamás Pap
źródło

34

Użyłem tego do przyklejenia stopki do dołu i zadziałało to dla mnie:

HTML

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

To jedyna modyfikacja, którą musisz zrobić w kodzie HTML, dodaj to divz "allButFooter"klasą. Zrobiłem to ze wszystkimi stronami, które były tak krótkie, wiedziałem, że stopka nie przyklei się do dołu, a także strony wystarczająco długie, że wiedziałem, że muszę przewijać. Zrobiłem to, aby zobaczyć, że działa dobrze w przypadku, gdy zawartość strony jest dynamiczna.

CSS

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

"allButFooter"Klasa ma min-heightwartość, która zależy od wysokości rzutni'S ( 100vhoznacza 100% wysokości rzutni) i wysokość stopki, w który wiedziałem już było 40px.

To wszystko, co zrobiłem i działało idealnie dla mnie. Nie próbowałem tego w każdej przeglądarce, tylko Firefox, Chrome i Edge, a wyniki były takie, jak chciałem. Stopka przykleja się do dołu i nie musisz mieszać się z indeksem Z, pozycją ani żadnymi innymi właściwościami. Pozycja każdego elementu w moim dokumencie była pozycją domyślną, nie zmieniłem jej na absolutną, stałą ani nic.

Praca z responsywnym projektem

Oto coś, co chciałbym wyjaśnić. To rozwiązanie, z tą samą stopką o wysokości 40 pikseli, nie działało tak, jak się spodziewałem, gdy pracowałem w responsywnym projekcie Twitter-Bootstrap. Musiałem zmodyfikować wartość, którą odejmowałem w funkcji:

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

Jest tak prawdopodobnie dlatego, że Twitter-Bootstrapma własne marginesy i wypełnienia, dlatego musiałem dostosować tę wartość.

Mam nadzieję, że wam się to przyda! Przynajmniej jest to proste rozwiązanie i nie wymaga wprowadzania dużych zmian w całym dokumencie.

N. Larrieux
źródło

Wystąpiły problemy z różnego rodzaju rozwiązaniami tego problemu. To rozwiązanie działa z moją stroną, która zmienia to, co jest wyświetlane w ciele za pomocą display: noneDzięki. To też jest miłe i proste.

Steve Waring

po wielu godzinach próbowania rozwiązań tylko dwa działały nl. position: fixed; bottom: 0i ten. To rozwiązanie jest najlepsze, ponieważ stopka nie przykleja się do dołu, ale pozostaje na końcu przewijanej strony.

Hmerman6006

aby skorzystać z odpowiedzi, możesz spojrzeć na to z innej strony, ustawiając opcję .footer {max-height: calc(100vh+40px); position: absolute}. Jak to działa, powinieneś po prostu znać swój rozmiar ciała.

Hmerman6006

29

Od IE7 możesz po prostu używać

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

Aby uzyskać wsparcie, zobacz caniuse .

Liam
źródło

77

Nie chcę stopki na dole, gdy treść jest poza stopką. Chcę, aby stopka przylegała do dołu, gdy nie ma jej wystarczająco dużo, a następnie rozwijała się w dół, jak zwykle, gdy jest więcej niż ekran. Lepka stopka rozwiązała ten problem.

Caveatrob

@Caveatrob: Pozwoliłem sobie na edytowanie tej ważnej informacji w twoim pytaniu, aby uniknąć nieporozumień (dla przyszłych czytelników prawdopodobnie rozwiązałeś to w międzyczasie :-)).

sleske

To rozwiązanie jako jedyne drukuje stopkę na każdej stronie i jest takie proste! Ale nie mogę sprawić, by treść nie pokrywała się z główną treścią. Czy ktoś ma na to rozwiązanie?

Hatzen

15

Proste rozwiązanie, którego używam, działa z IE8 +

Podaj minimalną wysokość: 100% na html, aby jeśli zawartość była mniejsza, wówczas strona nadal zajmowała pełną wysokość portu widoku i stopki na dole strony. Gdy zawartość się powiększa, stopka przesuwa się w dół wraz z zawartością i nadal trzyma się dołu.

Demo działającego skrzypce JS: 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
źródło

dobrze .. ale po prostu zaktualizuj .pageContentWrapper {padding-bottom: 100px; / * Wysokość stopki * /}

Subodh Sharma

Wielkie dzięki. pracuje nad Angular 7

Carlos Torres

Nie chcę tworzyć niepotrzebnego paska przewijania, gdy jest to możliwe.

Константин Ван

14

Kolejnym naprawdę prostym rozwiązaniem jest to:

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

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

jsFiddle

Sztuką jest, aby użyć display:tabledla całego dokumentu i display:table-rowze height:0na stopce.

Ponieważ stopka jest jedynym dzieckiem podrzędnym, które ma wyświetlacz jako table-row, jest renderowane na dole strony.

Jose Rui Santos
źródło

Uwielbiam tabele css, ale tworzą one dość dziwny problem: stackoverflow.com/questions/24898115/…

Costa

1

To rozwiązanie nie działa całkowicie - Firefox ignoruje wysokość stopki 0. Zamiast tego użyłem wysokości 1px, a nawet 1%. Edge, IE11, Chrome i mobilne safari są zadowolone z 0.

Kitet

Naprawdę uwielbiam to rozwiązanie. Ale kiedy buduję taki układ, obliczenia elementów potomnych w przeglądarce są sprawdzane. Powiedzmy, że chcemy mieć pojemnik u góry strony i musi on wynosić height: 100%100%, gdy współczynnik rzutowania wynosi 1/1 (kwadrat). Kiedy rzutnia staje się szersza (pozioma) wysokość będzie większa niż 100%, a jeśli węższa (pionowa) będzie mniejsza niż 100%. Wysokość jest proporcjonalna do szerokości okna. Próbowałem rozwiązać to za pomocą innego opakowania, ale to nie zadziałało. Ktoś dostał rozwiązanie lub przynajmniej podpowiedź?

Axel

@Axel W tej wersji dodałem niebieski div na górze o wysokości 100%, który zajmuje całą wysokość (minus wysokość stopki), niezależnie od szerokości rzutni. Myślę, że możesz mieć inne problemy z CSS. Spróbuj utworzyć zminimalizowaną wersję swojego problemu na podstawie mojego oryginalnego jsFiddle

Jose Rui Santos

@JoseRuiSantos Dziękuję bardzo za odpowiedź. Wygląda na błąd FireFox. Zobacz zrzut ekranu

Axel

7

Jedną z rzeczy, na którą należy uważać, są urządzenia mobilne, ponieważ realizują one ideę widoku w „nietypowy” sposób:

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

W związku z tym używanie position: fixed;(jak widziałem zalecane w innych miejscach) zazwyczaj nie jest dobrym rozwiązaniem. Oczywiście zależy to od dokładnego zachowania, którego szukasz.

To, z czego korzystałem i działało dobrze na komputerach i urządzeniach mobilnych, to:

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

z

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

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

Ben Jackson
źródło

7

Bardzo proste rozwiązanie flex, które nie zakłada stałej wysokości ani zmiany położenia elementów.

HTML

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

CSS

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

main {
  flex: 1;
}

Obsługa przeglądarki

Wszystkie główne przeglądarki, z wyjątkiem IE11 i niższych.

Upewnij się, że używasz Autoprefixera dla odpowiednich prefiksów.

Pokaż fragment kodu

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

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

Rozwiń fragment kodu

m.spyratos
źródło

działało jak urok! nawet dla resorów powyżej 4k stopek na dole

Arpan Banerjee

6

Zrób to

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

Możesz także poczytać o Flex, który jest obsługiwany przez wszystkie nowoczesne przeglądarki

Aktualizacja : przeczytałem o fleksie i wypróbowałem. To zadziałało dla mnie. Mam nadzieję, że zrobi to samo dla ciebie. Oto jak zaimplementowałem. Tutaj głównym nie jest identyfikator, to div

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

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

Tutaj możesz przeczytać więcej o flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Pamiętaj, że nie jest obsługiwany przez starsze wersje IE.

Aarth Tandel
źródło

1

To najlepsza odpowiedź w praktyce. Użycie flex-grow: 1czegoś powyżej stopki pozwoli prawidłowo utrzymać stopkę na dole.

iBug

5

Właśnie tutaj odpowiedziałem na podobne pytanie:

Umieść stopkę na dole strony z ustalonym nagłówkiem

Jestem całkiem nowy w tworzeniu stron internetowych i wiem, że już na nie odpowiedziano, ale jest to najłatwiejszy sposób, aby go rozwiązać i myślę, że jest jakoś inaczej. Chciałem czegoś elastycznego, ponieważ stopka mojej aplikacji internetowej ma dynamiczną wysokość, więc użyłem FlexBox i przekładki.

Zacznij od ustawienia wysokości HTML i treści

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Zakładam columnzachowanie naszej aplikacji w przypadku, gdy musisz dodać nagłówek, bohatera lub dowolną treść wyrównaną pionowo.

Utwórz klasę spacer

.spacer {
    flex: 1; 
}

Więc później twój HTML może być podobny

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Możesz grać z nim tutaj https://codepen.io/anon/pen/xmGZQL

Kamuflaż
źródło

5

Jest to znane jako lepka stopka. Wyszukiwania google dla niego podchodzi z dużą ilością wyników. Przyklejona stopka CSS to ta, z której korzystałem. Ale jest więcej.

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

Rozwiń fragment kodu

Źródło tego kodu

Paolo Bergantino
źródło

3

Moja metoda jquery umieszcza stopkę na dole strony, jeśli zawartość strony jest mniejsza niż wysokość okna, lub po prostu umieszcza stopkę po treści inaczej:

Ponadto trzymanie kodu we własnej obudowie, zanim inny kod skróci czas potrzebny na zmianę położenia stopki.

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

Sam Jones
źródło

3

Sam analizowałem ten problem. Widziałem sporo rozwiązań i każde z nich miało problemy, często związane z pewnymi magicznymi liczbami.

Korzystając z najlepszych praktyk z różnych źródeł, wymyśliłem to rozwiązanie:

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

Chodziło mi o to, aby główna zawartość przewijała stopkę i nagłówek w zielonym obszarze.

oto prosty css:

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
źródło

3

Nienawidzę witryn zaprojektowanych w ten sposób. Dlaczego chcesz ograniczyć ilość tekstu, który mogę jednocześnie czytać? Nie muszę cały czas widzieć nagłówka i stopki, wiem, gdzie je znaleźć, kiedy chcę.

Tarmil

1

@Tarmil zajrzyj na numerics.info . Czy widzisz teraz, kiedy może to być przydatne?

husayt

3

W ten sposób rozwiązałem ten sam problem

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>

Rozwiń fragment kodu

Nemus
źródło

3

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

To działa dobrze

Karthikaeyan
źródło

2

Po prostu dostosuj sekcję stopki

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

rashedcs
źródło

Nie działa. Zawsze przykleja się do dołu, nawet jeśli mamy bardzo dużą stronę. Nie można przewijać całej strony, ale po prostu przyklejać się do dołu.

fWd82

Nie działa Stopka jest dodawana do treści.

niezależny

1

oto moje dwa centy. W porównaniu do innych rozwiązań nie trzeba dodawać dodatkowych pojemników. Dlatego to rozwiązanie jest nieco bardziej eleganckie. Poniżej przykładu kodu wyjaśnię, dlaczego to działa.

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

Pierwszą rzeczą, którą robimy, jest uczynienie największego kontenera (html) 100%. Strona HTML jest tak duża jak sama strona. Następnie ustawiamy wysokość ciała, może ona być większa niż 100% tagu HTML, ale powinna być co najmniej tak duża, dlatego używamy minimalnej wysokości 100%.

Sprawiamy również, że ciało jest względne. Względne oznacza, że możesz przesuwać element bloku wokół krewnego z jego pierwotnej pozycji. Jednak nie używamy tego tutaj. Ponieważ krewny ma drugie zastosowanie. Każdy element bezwzględny jest albo bezwzględny dla katalogu głównego (html), albo dla pierwszego względnego rodzica / dziadka. Właśnie tego chcemy, chcemy, aby stopka była absolutna w stosunku do ciała, a mianowicie do dołu.

Ostatnim krokiem jest ustawienie stopki na wartość bezwzględną i dolną: 0, która przesuwa ją na dół pierwszego względnego rodzica / dziadka (oczywiście).

Teraz nadal mamy jeden problem do rozwiązania, gdy wypełniamy całą stronę, treść przechodzi pod stopkę. Dlaczego? cóż, ponieważ stopka nie znajduje się już w „przepływie HTML”, ponieważ jest bezwzględna. Jak to naprawić? Dodamy do ciała wyściółkę. Dzięki temu ciało jest większe niż jego zawartość.

Mam nadzieję, że wyjaśniłem wam.

David
źródło

1

Dynamiczna jedna linijka za pomocą jQuery

Wszystkie metody CSS, z którymi się spotkałem, są zbyt sztywne. Ponadto ustawienie stopki na fixednie jest opcją, jeśli nie jest to częścią projektu.

Testowane na:

Chrome: 60
FF: 54
IE: 11

Zakładając ten układ:

<html>

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

</html>

Użyj następującej funkcji jQuery:

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

Co to robi jest ustawić min-heightna #contentna wysokości okna - wysokość stopki , co kiedykolwiek, że być może w tym czasie.

Ponieważ użyliśmy tej opcji min-height, jeśli #contentwysokość przekracza wysokość okna , funkcja ulega łagodnie obniżeniu i nie ma żadnego wpływu, ponieważ nie jest potrzebna.

Zobacz to w akcji:

$("#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>

Rozwiń fragment kodu

Ten sam fragment kodu w JsFiddle

Premia:

Możemy pójść o krok dalej i dostosować tę funkcję do dynamicznego zmieniania wysokości przeglądarki w następujący sposób:

$(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>

Rozwiń fragment kodu

Haz Kode
źródło

1

Możesz to zrobić

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

Abdallah Abdillah
źródło

0

Wystarczy ustawić html, body i inne wiersze oprócz stopki na 100%. na przykład

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

css staje się

html, body, header, content{
height:100%;
}

Olatunde G.
źródło

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
źródło

0

Co z tym:

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

<footer>
 copyright blah blah
</footer>

novecentonove
źródło

Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, dlaczego i / lub jak ten kod odpowiada na pytanie, poprawia jego długoterminową wartość.

β.εηοιτ.βε

-1

Użyłem wielu moich projektów i nigdy nie dostałem żadnego problemu :)

w celach informacyjnych kod jest fragmentem

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

Rozwiń fragment kodu

Santosh Khalse
źródło

CSS, aby stopka strony HTML pozostała na dole strony z minimalną wysokością, ale nie zachodziła na stronę

Odpowiedzi:

ZOBACZ DEMO

Metoda Flexbox:

`position:absolute` Metoda: (nie zezwala na dynamiczną wysokość stopki)

Metoda układu tabeli:

Css

HTML

Dynamiczna jedna linijka za pomocą jQuery

Premia:

CSS, aby stopka strony HTML pozostała na dole strony z minimalną wysokością, ale nie zachodziła na stronę

Odpowiedzi:

ZOBACZ DEMO

Metoda Flexbox:

position:absolute Metoda: (nie zezwala na dynamiczną wysokość stopki)

Metoda układu tabeli:

Css

HTML

Dynamiczna jedna linijka za pomocą jQuery

Premia:

`position:absolute` Metoda: (nie zezwala na dynamiczną wysokość stopki)