CSS: fixé au bas et centré

J’ai besoin de fixer mon pied de page au bas de la page et de le centrer. Le contenu du pied de page peut changer à tout moment, donc je ne peux 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 rampé sur le web et n’ai rien trouvé. J’ai essayé de créer un conteneur div et nada. J’ai essayé d’autres combinaisons et gurnisht. Comment puis-je y arriver?

Merci

    Vous devriez utiliser une solution sticky footer telle que 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:

     

    Code révisé par Daniel Kanis :

    changez simplement les lignes suivantes en CSS

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

    et en html:

     

    Your footer text here.

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

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

    http://jsfiddle.net/gLhEZ/

    Le problème est en position: static . Statique signifie ne rien faire du tout avec la position. position: absolute est ce que vous voulez Le centrage de l’élément rest cependant difficile. Les éléments suivants devraient 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 à partir de cette réponse: Comment centrer l’élément positionné de façon absolue dans div?

    Il y a 2 problèmes potentiels que je vois:

    1 – IE a eu des problèmes de 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’object de pied de page soit centré. Sinon, la largeur totale de la page est utilisée par défaut et la marge automatique de gauche et de droite est définie sur 0. Si vous souhaitez que la barre de pied de page prenne la largeur (comme la barre de notification StackOverflow) et centre le texte, append “text-align: center” à votre définition.

    J’ai encapsulé le ‘problème div dans une autre div’ permet d’appeler cette div la enclose div … fait que l’enceinte div en css ait une largeur de 100% et postion fixe avec un fond de 0 … puis insère le problème div dans la div enclose c’est comme ça que ça ressemblerait

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

    puis en html …

     

    C’est parti!
    Hypertextie

    Basé sur le commentaire de @Michael:

    Il y a une meilleure façon de le faire. Créez simplement le corps avec la position: relative et un remplissage à la taille du pied de page + l’espace entre le contenu et le pied de page souhaité. Ensuite, créez un div en pied de page avec un absolu et un fond: 0.

    Je suis allé chercher l’explication et ça se résume à ceci:

    • Par défaut, position absolue du bas: 0px le place au bas de la fenêtre … pas le bas de la page.
    • Le positionnement relatif d’un élément réinitialise l’étendue de la position absolue de ses enfants … Ainsi, en positionnant le corps sur un positionnement relatif, la position absolue du bas: 0px reflète désormais vraiment le bas de la page.

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

    voici un exemple utilisant la grid 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; } 
          Document