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

CSS Push Div to bottom of page

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 :

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.

Answer 1

Je commenterais bien si je pouvais, mais je n'ai pas encore de permissions, donc je vais poster un indice comme réponse, pour un comportement inattendu sur certains appareils Android :

Position : Fixé ne fonctionne que sous 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

Answer 2

Il s'agit d'une solution intuitive utilisant la commande viewport qui définit simplement la hauteur minimale à la hauteur du viewport 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%;
}

Answer 3

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

Answer 4

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

Answer 5

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 !

En effet, le réglage height: 100% ne prend que la hauteur de la div parent !

Donc, si l'ensemble de votre html (à l'intérieur du corps) ressemble à ce qui suit :

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

Ensuite, les éléments suivants seront parfaits :

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

...car le "support" prendra sa hauteur directement du "corps".

Bravo à My Head Hurts, dont la réponse est celle que j'ai fini par faire fonctionner !

Cependant. Si votre code html est plus imbriqué (parce qu'il ne s'agit que d'un élément de la page complète, ou qu'il se trouve dans une certaine colonne, etc. chaque élément contenant a également height: 100% défini sur le div. Sinon, l'information sur la hauteur sera perdue entre "body" et "holder".

Par exemple, dans l'exemple suivant, j'ai ajouté la classe "full height" à chaque div pour m'assurer que la hauteur est respectée jusqu'à nos éléments header/body/footer :

<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 full-height dans le css :

#full-height{
    height: 100%;
}

Cela a réglé mes problèmes !