CSS: fixe vers le bas et centré

Question

J'ai besoin de mon pied de page qui se fixe au bas de la page et de le centrer. Le contenu du pied de page peuvent changer en tout temps, donc je ne peux pas juste le centrer dans la marge gauche: 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'a rien trouvé. J'ai essayé de faire un div conteneur et nada. J'ai essayé d'autres combinaisons et gurnisht. Comment puis-je faire cela?

Merci

Answer 1

Vous devez utiliser un collant pied de solution comme celle-ci : http://ryanfait.com/sticky-footer/

* {
    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 existe d'autres comme 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 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 code html:

<div id="wrap">

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

    </div>

</div>

<div id="footer">

</div>

Answer 2

code révisé par Daniel Kanis:

il suffit de changer les lignes suivantes dans le CSS

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

et dans le html:

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

(edit note: correction du nom de la classe)

Answer 3

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: absolute; display: none;'>I am a footer</div>

Il est parfois plus facile à mettre en œuvre JS que de pirater vieux CSS.

http://jsfiddle.net/gLhEZ/

Answer 4

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

1 - IE a eu de la difficulté avec position:fixed dans le passé. Si vous êtes en utilisant IE7+, avec un doctype valide ou non le navigateur IE, ce n'est pas une partie du problème

2 - Vous devez spécifier une largeur pour le pied de page si vous souhaitez que le pied de page de l'objet à être centré. Sinon, la valeur par défaut toute la largeur de la page et de l'automobile de la marge de gauche et de droite, de 0. Si vous souhaitez que la barre de pied de page pour prendre de la largeur (comme le StackOverflow avis bar) et le centre du texte, vous devez ajouter "text-align: center" de votre définition.

Answer 5

J'ai enfermé le problème de div dans un autre div' vous permet d'appeler cette div la joindre div... faire la joindre div dans le css ont une largeur de 100% et position fixe avec un bas de 0... insérez ensuite le problème de div dans les joindre div c'est à quoi il devrait ressembler

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

Et voila!
-Hypertextie