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

262

CSS Push Div vers le bas de la page

S'il vous plaît regarder ce lien, je veux le contraire: Lorsque le contenu déborde sur les barres de défilement, je veux que mon pied soit toujours au complet en bas de la page, comme le débordement de pile.

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

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

Mais tout ce qu'il fait, c'est aller en bas de la fenêtre d'affichage et y rester même si vous faites défiler vers le bas, il n'est donc plus en bas.

Image: Exemple

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

css positioning css-position footer H Bellamy
la source
1
essayez position:fixed, mais ce ne sera pas exactement la meilleure façon de le faire
redDevil
Essayez la position: relative sur le corps.
1
vous n'avez pas fermé votre; après la position: absolue. cela aurait parfaitement fonctionné sinon!
AlexHighHigh

Réponses:

546

C'est précisément position: fixedpour cela que:

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

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

Joseph Silber
la source
65
Cette solution n'est pas bonne dans 90% des cas. si vous
redimensionnez
10
@aroth c'est parce que ce sont deux solutions totalement différentes. Cette solution gardera le pied de page en bas de la zone visuelle de l'écran à tout moment. La solution alternative conserve le pied de page au bas de l'écran ou au bas de la page, en fonction de ce qui est plus grand - c'est ce que le demandeur a demandé.
Ma tête fait mal
6
@MyHeadHurts - Vous avez absolument raison. Après avoir répondu, j'ai réalisé que ce n'était pas ce que le PO voulait, mais je l'ai laissé ici pour les personnes à la recherche d'un pied de page fixe simple. D'après les commentaires (et votes), il semble que beaucoup de gens ont du mal avec cette fonctionnalité CSS élémentaire.
Joseph Silber
1
@MyHeadHurts - Très bien, mais pour mon argent, ils sont tous les deux fondamentalement les mêmes. Le contenu défile sous le fixedpied de page, lorsqu'il y a suffisamment de contenu pour le faire. C'est assez bon pour moi. Bien sûr, je peux voir comment de très gros pieds de page comme ce qu'ils ont sur stackoverflow ne fonctionneraient pas bien avec l' fixedapproche, mais pour un pied de page basique, cette approche fonctionne bien à mon avis.
aroth
@aroth, je suis d'accord, c'est une bonne solution et tout dépend de ce que vous voulez. Je montrais juste pourquoi une solution était plus compliquée que l'autre -> ils ne font pas la même chose.
Ma tête fait mal
188

Malheureusement, vous ne pouvez pas le faire sans ajouter un peu de HTML supplémentaire et avoir un élément CSS en s'appuyer sur un autre.

HTML

Vous devez d'abord envelopper votre header, footeret #bodydans une #holderdiv:

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

CSS

Ensuite, définissez height: 100%sur htmlet body(corps réel, pas votre #bodydiv) pour vous assurer que vous pouvez définir la hauteur minimale en pourcentage sur les éléments enfants.

Maintenant, réglez min-height: 100%sur le #holderdiv afin qu'il remplisse le contenu de l'écran et utilisez position: absolutepour asseoir le pied de page au bas du #holderdiv.

Malheureusement, vous devez appliquer padding-bottomà la #bodydiv qui est de la même hauteur que la 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/

J'ai mal à la tête
la source
je ne comprends pas pourquoi largeur: 100%; est requis
Somnath Kharat
4
@sTACKoVERFLOW - Si vous ne spécifiez pas un width ou les deux left etright puis les valeurs sont définies sur autoet l'élément sera bouclé pour s'adapter à son contenu. Spécifier width: 100% ou left: 0 et right:0garantit que l'élément positionné de façon absolue occupe toute la largeur de l'élément conteneur
My Head Hurts
Je cherchais un comportement similaire, mais dans mon cas, le #body div est flottant, par exemple "float: left". L'exemple du corps court fonctionne, mais l'exemple du corps long ne fonctionne pas. Toutes les suggestions sur la façon dont je peux obtenir le comportement souhaité en utilisant float sur la div #body.
Jatin
@Ian a dit, dans une réponse parce qu'il n'avait pas assez de représentant pour commenter: Si vous rencontrez des problèmes dans asp.net avec la réponse de «My Head Hurts» - vous devez ajouter «height: 100%» à la principale généré la balise FORM ainsi que les balises HTML et BODY pour que cela fonctionne.
msouth
Si vous essayez de faire fonctionner cela à l'intérieur d'un div plutôt qu'à l'intérieur du corps entier, assurez-vous de spécifier height=100%sur tous vos éléments contenants, y compris les <form>éléments.
Ben Caine
13

Je viens de trouver une autre solution comme l'exemple ci-dessus. Écart 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>

Eh bien, cette méthode ne prend pas en charge l'ancien navigateur, mais il est acceptable que l'ancien navigateur fasse défiler 30 pixels pour afficher le pied de page

Anonyme
la source
5

Je me rends compte qu'il est dit de ne pas l'utiliser pour 'répondre à d'autres réponses' mais malheureusement je n'ai 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 générée principale ainsi qu'aux balises HTML et BODY pour que cela fonctionne.

Ian
la source
4

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%;
}
AlexHighHigh
la source
3

Je commenterais si je le pouvais, mais je n'ai pas encore d'autorisations, donc je posterai un indice comme réponse, pour un comportement inattendu sur certains appareils Android:

Position: fixe ne fonctionne que dans Android 2.1 à 2.3 en utilisant la balise META suivante: 

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

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

Tarciso Junior
la source
2

Il s'agit d'une solution intuitive utilisant la commande de fenêtre qui définit simplement 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%;
}
Obromios
la source
1

J'ai résolu un problème similaire en mettant tout mon contenu principal dans une balise div supplémentaire (id = "external"). J'ai ensuite déplacé la balise div avec id = "footer" en dehors de cette dernière balise div "externe". J'ai utilisé CSS pour spécifier la hauteur de "externe" et spécifié la largeur et la hauteur de "pied de page". J'ai également utilisé CSS pour spécifier la marge gauche et la marge 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 du div "externe", mais heureusement à l'extérieur du div principal "content" qui semble étrange, mais c'est où je le veux).

David B
la source
1

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

C'est parce que le réglage height: 100%ne prend que la hauteur de la division 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>

Ensuite, ce sera bien:

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

... comme "support" ramassera sa hauteur directement à partir de "corps".

Félicitations à My Head Hurts, dont la réponse a été celle que j'ai fini par me mettre au travail!

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

Par exemple, ce qui suit, où j'ai ajouté la classe "pleine hauteur" à chaque div pour vous assurer que la hauteur descend jusqu'aux é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 n'oubliez pas de définir la hauteur sur la classe pleine hauteur dans le CSS:

#full-height{
    height: 100%;
}

Cela a résolu mes problèmes!

Tim L
la source
0

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";
}
George Carlin
la source
0 
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
Praveen Kundu
la source
Veuillez décrire dans votre réponse, quel était le problème et comment cet extrait de code le résoudra-t-il, pour aider les autres à comprendre cette réponse
FZs
-2

utiliser la classe bootstrap à fond fixe

<div id="footer" class="fixed-bottom w-100">
Gowtham Sooryaraj
la source
Rien n'indique qu'OP utilise Bootstrap.
TylerH