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

Question

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

Mam następującą stronę (deadlink: http://www.workingstorage.com/Sample.htm), która ma stopkę, której nie mogę zrobić na dole strony.

Chcę, aby stopka

przyklejaj się do dołu okna, gdy strona jest krótka, a ekran nie jest wypełniony, i
pozostań na końcu dokumentu i przesuwaj się w dół, jak zwykle, gdy jest więcej niż ekran pełen treści (zamiast nakładania się na zawartość).

CSS jest dziedziczony i mnie przeraża. Nie mogę tego zmienić. prawidłowo umieścić minimalną wysokość na treści lub zrobić stopkę iść do dołu.

419

css footer

Author: Deni J., 2009-03-13

Source

30 answers

Poniżej 4 różne metody mojej pracy:

W każdym przykładzie teksty można dowolnie edytować, aby zilustrować, w jaki sposób treść będzie renderowana w różnych scenariuszach.

1) Flexbox

body{ height:100vh; margin:0; }

header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }

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

footer{
  margin-top:auto; 
}

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

2) Siatka

body{ 
  min-height: 100vh; 
  margin: 0; 
  
  display: grid;
  grid-template-rows: auto 1fr auto;
}

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

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

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

Poniższa metoda wykorzystuje "trick", umieszczając pseudoelement ::after na body i ustawiając go tak, aby miał dokładną wysokość stopki, więc zajmie dokładnie to samo gdy stopka znajduje się nad nią, wydaje się, że stopka zajmuje miejsce i eliminuje negatywne skutki absolutnego pozycjonowania (na przykład przechodzenia nad treścią ciała) [15]}

3) `position:absolute` (Nie dynamiczna Wysokość stopki)

body{ min-height:100vh; margin:0; position:relative; }
header{ min-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 contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

4) Table-layout

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

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

article { 
  height: 1%;
}

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

/**** Trick: ****/

body {
  display: table;
  width: 100%; 
}

body > footer {
   display: table-row;
}

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

225

Author: vsync,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-10 08:54:52

Bardzo proste podejście, które działa świetnie cross browser jest to:

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>

56

Author: Tamás Pap,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-05 18:59:59

Użyłem tego, aby przykleić stopkę do dołu i zadziałało na 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 HTML, dodaj {[3] } z klasą "allButFooter". Zrobiłem to ze wszystkimi stronami, tymi, które były tak krótkie, wiedziałem, że stopka nie przylgnie do dołu, a także strony na tyle długie,że wiedziałem, że muszę przewijać. Zrobiłem to, aby zobaczyć, że to działa ok w przypadku, gdy zawartość strony jest dynamiczna.

CSS

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

Klasa "allButFooter" ma wartość min-height, która zależy od wysokości viewportu (100vh oznacza 100% wysokości viewportu) i wysokości stopki, o której już wiedziałem, że jest 40px.

To wszystko, co zrobiłem, i to 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, jakie chciałem. Stopka przykleja się do dołu i nie musisz mieszać z indeksem z, pozycją ani innymi właściwościami. Na pozycja każdego elementu w moim dokumencie była domyślną pozycją, nie zmieniłem jej na absolutną lub stałą lub cokolwiek.

praca z responsywnym designem

Chciałbym coś wyjaśnić. To rozwiązanie, z tą samą stopką o wysokości 40px, nie działało tak, jak oczekiwałem, gdy pracowałem w responsywnym projekcie przy użyciu Twitter-Bootstrap. Musiałem zmodyfikować wartość, którą odejmuję w funkcji:

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

To prawdopodobnie dlatego, że Twitter-Bootstrap ma własne marginesy i wypełnienia, dlatego musiałem dostosować tę wartość.

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

39

Author: N. Larrieux,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-23 15:14:17

Od IE7 możesz po prostu użyć

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

Zobacz caniuse dla wsparcia.

35

Author: Liam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-23 09:35:37

Bardzo proste rozwiązanie flex, które nie przyjmuje stałych wysokości ani nie zmienia 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ądarek

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

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

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

21

Author: m.spyratos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-04 22:38:50

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

Podaj min-height: 100% na html tak, że jeśli zawartość jest mniejsza, to nadal strona ma pełny widok - wysokość portu i stopka przykleja się na dole strony. Gdy zawartość wzrasta, stopka przesuwa się w dół wraz z zawartością i przykleja się do dołu.

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

Css

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

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

16

Author: Sanjeev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-19 07:16:52

Jeszcze jedno, naprawdę proste rozwiązanie jest to:

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

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

JsFiddle

Sztuką jest użycie display:table dla całego dokumentu i display:table-row z height:0 dla stopki.

Ponieważ stopka jest jedynym dzieckiem ciała, które ma wyświetlacz jako table-row, jest renderowana na dole strony.

14

Author: Jose Rui Santos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-09 12:56:43

[[3]}Należy uważać na urządzenia mobilne, ponieważ realizują one ideę viewportu w "niezwykły" sposób: [4]}

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

Jako takie, używanie position: fixed; (Jak widziałem polecane w innych miejscach) zazwyczaj nie jest dobrym rozwiązaniem. Oczywiście, to zależy od zachowania, którego szukasz.

What I ' ve używany i dobrze działał na komputerach stacjonarnych i 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;
}

7

Author: Ben Jackson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-05 13:00:03

Zrób to

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

Możesz również przeczytać o flexie, który jest obsługiwany przez wszystkie nowoczesne przeglądarki

Update : czytałem o flex i próbowałem. U mnie zadziałało. Mam nadzieję, że zrobi to samo dla Ciebie. Oto jak zaimplementowałem.Tutaj main nie jest ID jest 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/

Należy pamiętać, że nie jest on obsługiwany przez starsze wersje IE.

7

Author: Aarth Tandel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-01 05:17:27

Jest to znane jako lepka stopka. A google search na to wychodzi z wielu wyników. CSS Sticky Footer to ta, której z powodzeniem użyłem. Ale jest ich 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>

Źródło tego kodu

6

Author: Paolo Bergantino,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-07 13:52:49

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

Stopka pozycji na dole strony ze stałym nagłówkiem

Jestem całkiem nowy w tworzeniu stron internetowych i Wiem, że już na to odpowiedziano, ale jest to najprostszy sposób, jaki znalazłem, aby go rozwiązać i myślę, że jest w jakiś sposób inny. Chciałem coś elastycznego, ponieważ stopka mojej aplikacji internetowej ma dynamiczną wysokość, skończyło się na użyciu FlexBox i spacer.

zacznij od ustawienia wysokości dla Twojego html i body

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

Zakładam column zachowanie dla naszej aplikacji, w przypadku, gdy trzeba dodać nagłówek, bohatera lub dowolną zawartość wyrównaną pionowo.

Utwórz klasę spacer

.spacer {
    flex: 1; 
}

więc później twój HTML może być czymś w stylu

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

Możesz się nim bawić tutaj https://codepen.io/anon/pen/xmGZQL

5

Author: Camo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-14 20:32:18

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

Ponadto, trzymanie kodu we własnej obudowie przed innym kodem skraca czas potrzebny na zmianę położenia stopki.

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

4

Author: Sam Jones,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-18 08:36:15

Ja sam przyglądałem się temu problemowi. Widziałem sporo rozwiązań i każdy z nich miał problemy, często związane z magicznymi liczbami.

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

Http://jsfiddle.net/vfSM3/248/

Rzeczą, którą chciałem tutaj osiągnąć, było przewijanie głównej treści między stopką i nagłówkiem wewnątrz zielonego obszaru.

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

3

Author: husayt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-05 13:16:36

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

3

Author: Nemus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-20 06:58:42

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

To działa dobrze

3

Author: Karthikaeyan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-20 05:34:33

Jednoliniowe rozwiązanie przy użyciu Bootstrap

Poza wszystkimi dostarczonymi rozwiązaniami CSS i jQuery,
Wymieniłem rozwiązanie używając Bootstrap z pojedynczą deklaracją klasy na ciało tag: d-flex flex-column justify-content-between

to nie wymaga znając wysokość stopki przed czasem.
to nie wymaga ustawienia pozycja absolutna.
to działa z dynamicznymi divami że overflow na mniejszych ekranach.

html, body {
  height: 100%;
}

<html>

    <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>

    <body class="d-flex flex-column justify-content-between text-white text-center">

        <header class="p-5 bg-dark">
          <h1>Header</h1>
        </header>
        <main class="p-5 bg-primary">
          <h1>Main</h1>
        </main>
        <footer class="p-5 bg-warning">
          <h1>Footer</h1>
        </footer>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    </body>

</html>

3

Author: RICHARD ABRAHAM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-14 05:25:36

Możesz to zrobić

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

2

Author: Abdallah Abdillah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-16 14:46:04

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>

2

Author: rashedcs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-05 17:49:51

Oto moje dwa centy. W porównaniu z innymi rozwiązaniami nie trzeba dodawać dodatkowych pojemników. Dlatego To rozwiązanie jest nieco bardziej eleganckie. Pod przykĹ 'adem 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>

Więc pierwszą rzeczą jaką robimy, jest stworzenie największego kontenera (html) w 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ć przynajmniej tak duża, dlatego używamy min-height 100%.

We również uczynić ciało względnym. Relative oznacza, że możesz przenieść element blokowy wokół relative z jego pierwotnej pozycji. Nie używamy tego tutaj. Bo krewny ma drugie zastosowanie. Każdy element absolutny jest albo absolutny do głównego (html), albo do pierwszego względnego rodzica/dziadka. To jest to, czego chcemy, chcemy, aby stopka była absolutna, w stosunku do ciała, a mianowicie do dołu.

Ostatnim krokiem jest ustawienie stopki na absolute i bottom:0, co przesuwa ją na dół pierwszy rodzic / dziadek, który jest względny (ciało ).

Teraz mamy jeszcze jeden problem do rozwiązania, kiedy wypełniamy całą stronę, zawartość przechodzi pod stopką. Dlaczego? cóż, ponieważ stopka nie jest już wewnątrz "html flow", ponieważ jest absolutna. Jak to naprawimy? Dodamy wyściółkę-dół do ciała. To sprawia, że ciało jest rzeczywiście większe niż jego zawartość.

Mam nadzieję, że wyraziłem się jasno.

1

Author: David,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-30 15:43:20

Dynamic one liner using jQuery

Wszystkie metody CSS, z którymi się zetknąłem, są zbyt sztywne. Ponadto ustawienie stopki na fixed nie jest opcją, jeśli nie jest to część 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");

To co robi to ustawia min-height dla #content na wysokość okna - wysokość stopka

Ponieważ użyliśmy min-height, Jeśli #content wysokość przekracza wysokość okna, funkcja rozkłada się wdzięcznie i nie ma żadnego wpływu, ponieważ nie jest potrzebna.

Zobacz go 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>

Ten sam fragment na JsFiddle

Bonus:

Możemy pójść dalej i sprawić, że ta funkcja dostosuje się do dynamicznej zmiany rozmiaru przeglądarki, jak więc:

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

1

Author: I haz kode,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55

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

1

Author: San Jaisy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-16 08:19:47

Po prostu ustaw html, body i inne wiersze z wyjątkiem stopki na 100%. e. g

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

Css staje się

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

0

Author: Olatunde G.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-02 09:55:51

What I did

Html

    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>

Css

.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }

Nie trzeba używać pozycji stałej i absolutnej. Po prostu napisz html w odpowiedni sposób.

0

Author: Usman I,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-02 16:22:42

To bardzo proste. Takie rozwiązanie nie wymaga znajomości wysokości stopki.

<body>
  <div class="app">
    Website
  </div>
  <div class="footer">
    Footer
  </div>
</body>

.app {
  min-height: 100vh;
}

0

Author: mhlavacka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-07 10:08:59

Niektóre rozwiązania nie działały dla mnie, ale najlepszą opcją, jaką znalazłem, był poniższy przykład, gdy zdecydowałem się użyć opcji flex.

html, body{
    height: 100%;   
}

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

.main-contents{ 
    flex: 1 0 auto;
    min-height: 100%;
    margin-bottom: -77px;
  background-color: #CCC;
}

.footer{
    height:  77px;
    min-height: 77px;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #000000;
    flex-shrink: 0;
    flex-direction: row;
    position: relative;
    
    
}

.footer-text{
  color: #FFF;
}

@media screen and (max-width: 767px){
    #content{
        padding-bottom: 0;
    }
    .footer{
        position: relative;
        /*position: absolute;*/
        height: 77px;
        width: 100%;
        bottom: 0;
        left: 0;
    }

}

<html>
  <body>
    <div class="main-contents" >
      this is the main content
    </div>
  </body>

  <footer class="footer">
    <p class="footer-text">This is the sticky footer</p>
  </footer>

</html>

0

Author: Tailane Brito,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-09 19:41:25

Uważam, że można ustawić główną zawartość na wysokość viewport, więc jeśli zawartość przekracza, wysokość głównej zawartości określi położenie stopki

* {
  margin: 0;
  padding: 0;
  width: 100%;
}

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

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

main {
  background: blue;
  /* This is the most important part*/
  height: 100vh; 
  
}
footer{
  background: black;
  height: 50px;
  bottom: 0;
}

<header></header>
<main></main>
<footer></footer>

0

Author: David Salomón,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-02-09 05:41:27

Używałem w wielu moich projektach i nigdy nie dostałem żadnego numeru :)

W celach informacyjnych, kod jest w urywku

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

-1

Author: Santosh Khalse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-21 06:28:20

Co z tym:

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

<footer>
 copyright blah blah
</footer>

-1

Author: novecentonove,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-22 17:54:15

Znalazłem lepsze rozwiązanie z freecodecamp.

#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
}

-1

Author: TheOnlyAnil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-10 15:43:30

score 358 · Accepted Answer

Prostą metodą jest stworzenie ciała 100% Twojej strony, z min-height z 100% również. Działa to dobrze, jeśli Wysokość stopki nie zmienia się.

Nadaj stopce ujemny margines-top:

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

358

Author: Jon Winstanley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-27 02:47:49

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

30 answers

Poniżej 4 różne metody mojej pracy:

1) Flexbox

2) Siatka

3) position:absolute (Nie dynamiczna Wysokość stopki)

4) Table-layout

Css

Html

Jednoliniowe rozwiązanie przy użyciu Bootstrap

Dynamic one liner using jQuery

Bonus:

3) `position:absolute` (Nie dynamiczna Wysokość stopki)