web-dev-qa-db-fra.com

CSS: fixé au bas et centré

J'ai besoin que mon pied de page soit fixé au bas de la page et qu'il soit centré. Le contenu du pied de page peut changer à tout moment, je ne peux donc pas simplement le centrer via margin-left: xxpx; margin-right: xxpx;

Le problème est que pour une raison quelconque, cela ne fonctionne pas:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

J'ai parcouru le Web et rien trouvé. J'ai essayé de faire un conteneur div et nada. J'ai essayé d'autres combinaisons et gurnisht. Comment puis-je y arriver?

Merci

csspositioningsticky-footer
73
CamelCamelCamel

Vous devriez utiliser une solution de pied collant comme celle-ci: 

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

Il y en a d'autres comme ça;

* {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 total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

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

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

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

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

avec le html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>
47
marcgg

révisé code par Daniel Kanis :

il suffit de changer les lignes suivantes en CSS

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

et en html:

<p class="enclose problem">
Your footer text here.
</p>
34
malsony

Une solution jQuery

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

Parfois, il est plus facile d'implémenter JS que de pirater de vieux CSS.

http://jsfiddle.net/gLhEZ/

26
Thilo Savage

Le problème réside dans position: static. Les moyens statiques ne font rien du tout avec la position. position: absolute est ce que vous voulez. Centrer l'élément reste cependant délicat. Ce qui suit devrait fonctionner:

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

ou

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

Mais je recommande la première méthode . J'ai utilisé des techniques de centrage de cette réponse: Comment centrer un élément en position absolue dans div?

5
user3502079

J'ai enfermé le 'problème div dans un autre div' permet d'appeler ce div l'enclose div ... Faire l'enclose div en css avoir une largeur de 100% et la position fixée avec un fond de 0 ... puis insérez le problème div dans la pièce jointe c'est à quoi il ressemblerait

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

puis en html ...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

Voilà!
-Hypertextie

3
Daniel Kanis

Je vois deux problèmes potentiels:

1 - IE a eu des problèmes avec la position: corrigé dans le passé. Si vous utilisez IE7 + avec un doctype valide ou un navigateur non-IE, cela ne fait pas partie du problème

2 - Vous devez spécifier une largeur pour le pied de page si vous souhaitez que l'objet de pied de page soit centré. Sinon, la largeur totale de la page est définie par défaut et la marge automatique de gauche et de droite est définie sur 0. Si vous voulez que la barre de pied de page prenne la largeur (comme la barre d’avis StackOverflow) et centre le texte, d'ajouter "text-align: center" à votre définition. 

3
Rob Allen

Basé sur le commentaire de @Michael:

Il y a une meilleure façon de faire cela. Créez simplement le corps avec position: relative et un padding la taille du pied de page + l'espace entre le contenu et le pied de page que vous voulez. Ensuite, créez simplement un pied de page avec un absolu et bas: 0.

Je suis allé chercher l'explication et cela se résume à ceci:

  • Par défaut, la position absolue du bas: 0px le positionne au bas de la fenêtre ... pas au bas de la page.
  • Le positionnement relatif d'un élément réinitialise l'étendue de la position absolue de ses enfants ... Ainsi, en plaçant le corps en position relative, la position absolue du bas: 0px reflète désormais réellement le bas de la page.

Plus de détails sur http://css-tricks.com/absolute-positioning-inside-relative-positioning/

1
lmsurprenant

voici un exemple d'utilisation de la grille CSS.

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

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

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

vous pouvez utiliser css grid: un exemple concret

0
Firas Omrane