web-dev-qa-db-fra.com

forcer le pied de page en bas sur les pages avec peu de contenu

J'ai une page avec seulement quelques lignes de contenu. Je veux que le pied de page soit poussé vers le bas.

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

Je ne veux pas utiliser

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

AKA Sticky Footer

Est-ce possible sans jQuery?

aucune suggestion?

cssfootersticky
23
pom4ik

Il y a un autre pied de page collant par Ryan Fait qui n'utilise pas la position fixée:

* {
    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 */
}
28
Vinícius Moraes

Voici une solution qui ne nécessite pas que le pied de page soit placé à l'extérieur de l'élément wrapper principal, c'est ainsi que la plupart des gens structurent leurs pages.

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>

Explication

L'élément wrapper remplira 100% de la hauteur de la fenêtre. (Vous pouvez également utiliser 100vh pour le wrapper si vous ne souhaitez pas définir la hauteur des éléments html et body.) Le wrapper a également un rembourrage inférieur pour créer un espace réservé pour le pied de page.

Le pied de page est absolument positionné au bas de l'emballage et se trouve dans l'espace réservé créé par le rembourrage inférieur de l'emballage.

Cela signifie que lorsque la page n'a pas de barres de défilement, le pied de page sera positionné tout en bas. Cependant, lorsqu'il y a suffisamment de contenu pour que les barres de défilement apparaissent, le pied de page sera poussé en dessous du contenu.

9
Thomas Higginbotham

Cette solution Flexbox est plus nette et beaucoup plus facile à implémenter:

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

Assurez-vous simplement d'envelopper le divs nécessaire dans le body.

7
Chidozie Nnachor

Essayez la solution Sticky Footer de Steve Hatcher

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

*/
5
Konstantin Tarkus

Si vous ne connaissez pas la taille du pied de page, vous pouvez également utiliser javascript et css

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

#footer{
    background-color: #292c2f !important;
    position:absolute;bottom:0px;
}

et la partie Javascript

$(document).ready(function(){
        if ($(document).height() > $(window).height()) {
            $('#footer').css('position', 'relative');
        }
});

Vous pouvez le faire facilement avec une autre approche en définissant min-height sur la balise avant votre balise de pied de page.

.the-tag-before-footer{
     min-height:30%;
 }
0
Afshin Izadi