Wymuś stopkę na dole na stronach o małej zawartości

Mam stronę z tylko kilkoma linijkami treści. Chcę, żeby stopka została zepchnięta na dno.

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

Nie chcę używać 

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

AKA Sticky Footer

Czy jest to możliwe bez jQuery?

Jakieś sugestie?
Author: Blu, 2013-05-22
Source

4 answers

Istnieje inna sticky footerby Ryan Fait, która nie używa pozycji fixed:

* {
    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 -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}
 24
Author: Vinícius Moraes,
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-01 19:17:03

Oto rozwiązanie, które nie wymaga, aby stopka była umieszczona poza głównym elementem wrappera, co jest sposobem, w jaki większość ludzi układa swoje strony.

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

.wrapper {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 1em; /* Height of footer */
  min-height: 100%;
}

header {
  background-color: #cff;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: #000;
}
<div class="wrapper">
  <header>I am the header.</header>
  <article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
  <footer>I am the footer.</footer>
</div>

Explanation

Element owijający wypełni 100% wysokości okna widokowego. (Możesz również użyć 100vh dla owijarki, jeśli nie chcesz ustawiać wysokości elementów html i body.) Owijka ma również dolną wyściółkę, aby utworzyć element zastępczy dla stopki do siadaj.

Stopka jest całkowicie umieszczona na dole owijki i znajduje się w miejscu utworzonym przez dolną wyściółkę owijki.

Oznacza to, że gdy strona nie ma pasków przewijania, stopka zostanie umieszczona na samym dole. Jednak gdy zawartość jest wystarczająca do wyświetlenia pasków przewijania, stopka zostanie przesunięta poniżej zawartości.

 6
Author: Thomas Higginbotham,
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-11-09 19:32:17

Wypróbuj rozwiązanie Sticky Footer autorstwa Steve ' a Hatchera 

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to the total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/
 4
Author: Konstantin Tarkus,
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-11-20 10:42:30

To rozwiązanie Flexbox jest prostsze i łatwiejsze do wdrożenia:

HTML 

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

CSS 

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

Upewnij się, że zawijasz niezbędne divs wewnątrz body.

 1
Author: Chidozie Nnachor,
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-09-28 10:27:14