web-dev-qa-db-fra.com

Faites en sorte que div reste en bas du contenu de la page tout le temps, même s'il y a des barres de défilement

CSS Push Div au bas de la page

Veuillez regarder ce lien, je veux le contraire: quand le contenu déborde dans les barres de défilement, je veux que mon pied de page soit toujours au bas complet du bas de la page, comme Stack Overflow.

J'ai un div avec id="footer" et ce CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

Mais tout ce que cela fait est d'aller au bas de la fenêtre et y rester même si vous faites défiler l'écran vers le bas, de sorte que ce n'est plus au bas.

Image: Examlple

Désolé si non clarifié, je ne veux pas que cela soit corrigé, seulement pour qu'il soit au bas de tout le contenu.

csspositioningcss-positionfooter
232
H Bellamy

C’est précisément pour cela que position: fixed a été conçu:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Voici le violon: http://jsfiddle.net/uw8f9/

493
Joseph Silber

Malheureusement, vous ne pouvez pas faire cela en ajoutant un peu de HTML supplémentaire et en faisant en sorte qu’un élément CSS repose sur un autre.

HTML

Vous devez d’abord emballer vos headername __, footerand #body dans un #holder div:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Définissez ensuite height: 100% sur htmlet body(le corps réel, pas votre #body div) afin de pouvoir définir la hauteur minimale sous forme de pourcentage sur les éléments enfants.

Définissez maintenant min-height: 100% sur le #holder afin qu’il remplisse le contenu de l’écran et utilisez le position: absolute pour insérer le pied de page au bas du #holder.

Malheureusement, vous devez appliquer padding-bottom au #body div qui a la même hauteur que le footerpour vous assurer que le footerne se trouve pas au-dessus de tout contenu:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

Exemple de travail, corps court: http://jsfiddle.net/ELUGc/

Exemple de travail, corps long: http://jsfiddle.net/ELUGc/1/

177
My Head Hurts

Je viens de travailler pour une autre solution, comme dans l'exemple ci-dessus, j'ai un bogue (une erreur) pour moi. Variation par rapport à la réponse sélectionnée.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

pour la mise en page html

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Ainsi, cette méthode ne prend pas en charge les anciens navigateurs, mais il est acceptable que les anciens navigateurs défilent 30px pour afficher le pied de page.

12
Anonymous

Je me rends compte qu'il est interdit de l'utiliser pour "répondre à d'autres réponses", mais je n'ai malheureusement pas assez de représentant pour ajouter un commentaire sur la réponse appropriée (!) Mais ...

Si vous rencontrez des problèmes dans asp.net avec la réponse de "My Head Hurts", vous devez ajouter "height: 100%" à la balise FORM principale générée, ainsi qu'aux balises HTML et BODY, pour que cela fonctionne.

5
Ian

Vous n'avez pas fermé votre après la position: absolue. Sinon, votre code ci-dessus aurait parfaitement fonctionné!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
4
AlexHighHigh

Je voudrais commenter si je le pouvais, mais je n’ai pas encore d’autorisation. Je posterai donc un indice en réponse à un comportement inattendu sur certains appareils Android:

Position: Correction ne fonctionne que dans Android 2.1 à 2.3 en utilisant la balise méta suivante:

<meta name="viewport" content="width=device-width, user-scalable=no">.

voir http://caniuse.com/#search=position

3
Tarciso Junior

Cette solution intuitive utilise la commande viewport qui permet uniquement de définir la hauteur minimale à la hauteur de la fenêtre, moins la hauteur du pied de page.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
2
Obromios

J'ai résolu un problème similaire en plaçant tout mon contenu principal dans une balise div supplémentaire (id = "outer"). J'ai ensuite déplacé la balise div avec id = "footer" en dehors de cette dernière balise "externe". J'ai utilisé CSS pour spécifier la hauteur de "outer" et la largeur et la hauteur de "footer". J'ai également utilisé CSS pour spécifier les marges gauche et droite du "pied de page" comme auto. Le résultat est que le pied de page se trouve fermement au bas de ma page et défile avec la page aussi (bien qu'il apparaisse toujours à l'intérieur de la division "externe", mais heureusement en dehors de la division de "contenu" principale. Ce qui semble étrange, mais c'est où je le veux).

1
David B

si vous avez un pied de page à hauteur fixe (par exemple 712px), vous pouvez le faire avec js comme ceci:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
1
George Carlin

Je veux juste ajouter que la plupart des autres réponses ont bien fonctionné pour moi; Cependant, il a fallu beaucoup de temps pour les faire fonctionner!

Ceci est dû au fait que la définition de height: 100% ne prend que la hauteur de la div du parent!

Donc, si tout votre HTML (à l'intérieur du corps) ressemble à ceci:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Alors ce qui va bien se passer:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

... en tant que "titulaire" prendra sa hauteur directement à partir de "corps".

Bravo à My Head Hurts, dont la réponse a été celle à laquelle je me suis retrouvé au travail!

Cependant. Si votre html est plus imbriqué (parce que ce n'est qu'un élément de la page complète, ou s'il se trouve dans une certaine colonne, etc.), alors vous devez vous assurer que chaque élément contenant a également height: 100% défini sur le div. Sinon, les informations sur la hauteur seront perdues entre "body" et "holder".

Par exemple. le texte suivant, où j'ai ajouté la classe "hauteur maximale" à chaque div pour m'assurer que la hauteur atteigne tous les éléments d'en-tête/corps/pied de page:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

Et rappelez-vous de définir height sur full-class en CSS:

#full-height{
    height: 100%;
}

Cela a résolu mes problèmes!

1
Tim L