Faire en sorte que la div reste toujours en bas du contenu de la page, même s'il y a des barres de défilement.

Question

Faire en sorte que la div reste toujours en bas du contenu de la page, même s'il y a des barres de défilement.

Demandé el 11 de Janvier, 2012: Quand la question a-t-elle été
124542 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Regardez ce lien, je veux le contraire : Lorsque le contenu déborde sur les barres de défilement, je veux que mon pied de page soit toujours à l'emplacement de la complet en 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 qu'il fait, c'est aller au bas de la fenêtre, et y rester même si vous faites défiler la page vers le bas, de sorte qu'il n'est plus en bas.

Image : Examlple

Désolé si ce n'est pas clair, je ne veux pas qu'il soit fixé, mais seulement qu'il soit en bas de tout le contenu.

Demandé el 11 de Janvier, 2012 par H Bellamy

2 votes

Essayez position:fixed bien que ce ne soit pas exactement la meilleure façon de le faire.

Commenté el 11 de Janvier, 2012 par redDevil

1 votes

Position d'essai : relative sur le corps.

Commenté el 26 de Avril, 2016 par Utilisateur non enregistré

1 votes

Vous n'avez pas fermé votre ; après position : absolute. cela aurait parfaitement fonctionné autrement !

Commenté el 19 de Juin, 2016 par AlexHighHigh

Answer 1

5 Réponses

Answer 2

696voto

Joseph Silber Points 69582

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

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

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

Répondu el 11 de Janvier, 2012 par Joseph Silber (69582 Points )

102 votes

Cette solution n'est pas bonne dans 90 % des cas. Si vous redimensionnez votre fenêtre, votre pied de page se superposera à d'autres contenus et ne s'arrêtera pas à la fin de votre contenu.

Commenté el 28 de Octobre, 2012 par vsync

15 votes

@aroth c'est parce que ce sont deux solutions totalement différentes. Cette solution permet de maintenir le pied de page au bas de la zone visuelle de l'écran à tout moment. La solution alternative maintient le pied de page soit au bas de l'écran, soit au bas de la page, en fonction de la plus grande taille, ce qui correspond à la demande du demandeur.

Commenté el 26 de Novembre, 2012 par My Head Hurts

11 votes

@MyHeadHurts - Vous avez tout à fait 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 qui cherchent un simple pied de page fixe. D'après les commentaires (et les votes), il semble que de nombreuses personnes se débattent avec cette fonctionnalité CSS élémentaire.

Commenté el 26 de Novembre, 2012 par Joseph Silber

Afficher 4 autres commentaires

Answer 3

217voto

My Head Hurts Points 16980

Malheureusement, vous ne pouvez pas le faire sans ajouter un peu de HTML supplémentaire et sans qu'un élément de CSS dépende d'un autre.

HTML

Tout d'abord, vous devez envelopper votre header , footer et #body en un #holder div :

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

CSS

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

Maintenant, mettez min-height: 100% sur le #holder pour qu'il remplisse le contenu de l'écran et utiliser la fonction position: absolute pour placer le pied de page au bas de l'écran. #holder div.

Malheureusement, vous devez appliquer padding-bottom à la #body qui a la même hauteur que le footer pour s'assurer que le footer ne se situe 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/

Répondu el 11 de Janvier, 2012 par My Head Hurts (16980 Points )

0 votes

Je n'arrive pas à comprendre pourquoi width:100% ; est nécessaire

Commenté el 16 de Octobre, 2013 par Somnath Kharat

5 votes

@sTACKoVERFLOW - Si vous ne spécifiez pas un width ou les deux left et right alors les valeurs sont fixées à auto et l'élément s'adaptera à son contenu. Spécification de width: 100% ou left: 0 et right:0 garantit que l'élément positionné de manière absolue occupe toute la largeur de l'élément conteneur.

Commenté el 16 de Octobre, 2013 par My Head Hurts

0 votes

Je cherchais un comportement similaire, mais dans mon cas, le div #body est flottant, par exemple "float : left". L'exemple du corps court fonctionne, mais pas celui du corps long. Avez-vous des suggestions sur la façon dont je peux obtenir le comportement souhaité en utilisant le flottement sur la division #body ?

Commenté el 17 de Février, 2014 par Jatin

Afficher 4 autres commentaires

Answer 4

19voto

zeroriku Points 308

Je viens de trouver une autre solution car l'exemple ci-dessus présente un bug (erreur quelque part) pour moi. Variation par rapport à la réponse choisie.

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>

Cette méthode n'est pas compatible avec les anciens navigateurs, mais il est acceptable que les anciens navigateurs descendent de 30px pour afficher le pied de page.

plunker

Répondu el 11 de Août, 2013 par zeroriku (308 Points )

Answer 5

8voto

Ian Points 33

Je sais qu'il est indiqué de ne pas utiliser cette fonction pour "répondre à d'autres réponses", mais malheureusement, je n'ai pas assez de points de repère pour ajouter un commentaire à 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.

Répondu el 12 de Mai, 2015 par Ian (33 Points )

Answer 6

8voto

AlexHighHigh Points 310

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

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

Répondu el 19 de Juin, 2016 par AlexHighHigh (310 Points )

Faire en sorte que la div reste toujours en bas du contenu de la page, même s'il y a des barres de défilement.

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Faire en sorte que la div reste toujours en bas du contenu de la page, même s'il y a des barres de défilement.

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: