Comment puis-je positionner mon div au bas de son conteneur?

Compte tenu du code HTML suivant:

Je voudrais que #copyright rest au bas de #container .

Puis-je y parvenir sans utiliser un positionnement absolu? Si la propriété float supportait une valeur de ‘bottom’, il semblerait que cela ferait l’affaire, mais malheureusement, ce n’est pas le cas.

Probablement pas.

Assigner la position:relative à #container , puis position:absolute; bottom:0; position:absolute; bottom:0; à #copyright .


 #container { } #copyright { position: absolute; bottom: 0; } 
 

En fait, la réponse acceptée par @User ne fonctionnera que si la fenêtre est grande et que le contenu est court. Mais si le contenu est grand et que la fenêtre est courte, cela affichera les informations de copyright sur le contenu de la page, puis défilera vers le bas pour voir le contenu vous laissant un avis de copyright flottant. Cela rend cette solution inutile pour la plupart des pages (comme cette page, en fait).

La manière la plus courante de le faire est l’approche “CSS sticky footer”, ou une variante légèrement plus fine. Cette approche fonctionne très bien – SI vous avez un pied de page de hauteur fixe.

Si vous avez besoin d’un pied de page de hauteur variable qui apparaîtra en bas de la fenêtre si le contenu est trop court, et au bas du contenu si la fenêtre est trop courte, que faites-vous?

Avalez votre fierté et utilisez une table.

Par exemple:

 * { padding: 0; margin: 0; } html, body { height: 100%; } #container { height: 100%; border-collapse: collapse; } 
    
Lorem ipsum, etc.

Oui, vous pouvez le faire sans positionnement absolute et sans utiliser de table (quelle vis avec balisage et autres).

DEMO
Ceci est testé pour fonctionner sur IE> 7, chrome, FF & est une chose vraiment facile à append à votre mise en page existante.

 
Some content you don't want affected by the "bottom floating" div
supports not just text
Some other content you want kept to the bottom
this is in a div
 #container { height:100%; border-collapse:collapse; display : table; } .foot { display : table-row; vertical-align : bottom; height : 1px; } 

Il fait efficacement ce que float:bottom , même en tenant compte de la question soulevée dans la réponse de @Rick Reilly!

L’approche flexbox!

Dans les navigateurs pris en charge , vous pouvez utiliser les éléments suivants:

Exemple ici

 .parent { display: flex; flex-direction: column; } .child { margin-top: auto; } 
 .parent { height: 100px; border: 5px solid #000; display: flex; flex-direction: column; } .child { height: 40px; width: 100%; background: #f00; margin-top: auto; } 
 
Align to the bottom

C’est une vieille question, mais c’est une approche unique qui peut aider dans plusieurs cas.

Pure CSS, sans positionnement absolu, sans fixation de hauteur, cross-browser (IE9 +)

consultez ce violon de travail

Comme le stream normal est de haut en bas, nous ne pouvons pas simplement demander à la div de #copyright de coller au bas de son parent sans absolument se positionner, mais si nous voulions que le div #copyright rest en haut de son parent, ce sera très simple – parce que c’est la voie normale.

Nous allons donc utiliser cela dans notre avantage. nous allons changer l’ordre des #copyright dans le HTML, maintenant le #copyright div est en haut, et le contenu le suit tout de suite. nous faisons également étirer le contenu div (à l’aide de pseudo-éléments et de techniques de nettoyage)

Maintenant, il suffit d’inverser l’ordre dans la vue. cela se fait facilement avec la transformation CSS.

Nous faisons pivoter le conteneur de 180deg, et maintenant: up-is-down. (et nous inversons le contenu pour redevenir normal)

Si nous voulons avoir un scroolbar dans la zone de contenu, nous devons appliquer un peu plus de magie CSS. comme on peut le voir ici [dans cet exemple, le contenu est sous un en-tête – mais c’est la même idée]

 * { margin: 0; padding: 0; } html, body, #Container { height: 100%; color: white; } #Container:before { content: ''; height: 100%; float: left; } #Copyright { background-color: green; } #Stretch { background-color: blue; } #Stretch:after { content: ''; display: block; clear: both; } #Container, #Container>div { -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotate(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } 
 
Element 1
Element 2

Essaye ça;

 

Créez un autre div conteneur pour les éléments ci-dessus #copyright . Juste au-dessus du copyright, ajoutez un nouveau div :

Cela forcera le pied de page à être sous tout, comme dans le cas du positionnement relatif ( bottom:0px; ).

Vous pouvez en effet align la boîte vers le bottom sans utiliser position:absolute si vous connaissez la height du #container utilisant la fonctionnalité d’ alignement du texte des éléments inline-block .

Ici, vous pouvez le voir en action.

Ceci est le code:

 #container { /* So the #container most have a fixed height */ height: 300px; line-height: 300px; background:Red; } #container > * { /* Restore Line height to Normal */ line-height: 1.2em; } #copyright { display:inline-block; vertical-align:bottom; width:100%; /* Let it be a block */ background:green; } 

Lien ici

HTML:

 
content

CSS:

 html, body { width: 100%; height: 100%; } .overlay { min-height: 100%; position: relative; } .container { width: 900px; position: relative; padding-bottom: 50px; } .height { width: 900px; height: 50px; } .footer { width: 900px; height: 50px; position: absolute; bottom: 0; } 

Bien qu’aucune des réponses fournies ici n’ait semblé s’appliquer ou fonctionner dans mon cas particulier, je suis tombé sur cet article qui fournit cette solution soignée:

 #container { display: table; } #copyright { display: table-footer-group; } 

Je trouve cela très utile pour appliquer un design réactif à l’affichage mobile sans avoir à réorganiser tout le code HTML d’un site Web, en définissant lui-même le body sous forme de tableau.

Notez que seul le premier groupe table-footer-group ou table-footer-group table-header-group sera rendu comme tel: s’il y en a plusieurs, les autres seront rendus en tant que table-row-group .

Si vous voulez qu’il colle au fond, quelle que soit la hauteur du conteneur, le positionnement absolu est la solution. Bien sûr, si l’élément copyright est le dernier dans le conteneur, il sera toujours au bas de toute façon.

Pouvez-vous développer votre question? Expliquez exactement ce que vous essayez de faire (et pourquoi vous ne voulez pas utiliser le positionnement absolu)?

Aussi, s’il y a des stipulations avec l’utilisation de la position:absolute; ou position:relative; , vous pouvez toujours essayer de padding parent div ou de mettre une margin-top:x; . Ce n’est pas une très bonne méthode dans la plupart des cas, mais cela peut s’avérer utile dans certains cas.

Utiliser la propriété translateY et top

Il suffit de mettre l’élément child en position: relative et de le déplacer en haut: 100% (soit la hauteur de 100% du parent) et coller au bas du parent par transform: translateY (-100%) (soit -100% de la hauteur de l’enfant).

Avantages

  • vous ne prenez pas l’élément du stream de page
  • c’est dynamic

Mais toujours une solution de contournement 🙁

 .copyright{ position: relative; top: 100%; transform: translateY(-100%); } 

N’oubliez pas les préfixes pour l’ancien navigateur.

Si vous ne connaissez pas la taille du bloc enfant:

  #parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;} .child{background:red;vertical-align:bottom;}    
child

http://jsbin.com/ULUXIFon/3/edit

Si vous connaissez la hauteur du bloc enfant, ajoutez le bloc enfant, puis ajoutez padding-top / margin-top:

  #parent{background:green;width:200px;height:130px;padding-top:70px;} .child{background:red;vertical-align:bottom;height:130px;} 
child

Peut-être que cela aide quelqu’un: vous pouvez toujours placer le div en dehors de l’autre div, puis le pousser vers le haut en utilisant une marge négative:

 
Hello!

Juste parce que cela n’a pas été mentionné du tout, ce qui fonctionne généralement bien dans des situations comme la vôtre:

Placer le copyright-div après le conteneur-div

Vous n’auriez qu’à formater le copyright-div de la même manière que l’autre conteneur (même largeur totale, centrage, etc.), et tout va bien.

CSS:

 #container, #copyright { width: 1000px; margin:0 auto; } 

HTML:

 

La seule fois où cela pourrait ne pas être idéal est lorsque votre div-container est déclarée avec la height:100% , et que l’utilisateur devra faire défiler la page pour voir le copyright. Mais même si vous pouviez contourner (par exemple, margin-top:-20px – lorsque la hauteur de votre élément de copyright est 20px).

  • Pas de positionnement absolu
  • Pas de disposition de table
  • Pas de css fou, qui a l’air différent dans tous les autres navigateurs (eh bien au moins, vous savez)
  • Formatage simple et clair

Mis à part: Je sais que le PO a demandé une solution qui “… colle au fond du” conteneur “div …” , et pas quelque chose en dessous, mais allez, les gens recherchent de bonnes solutions ici, et cela est une!

Voici une approche visant à faire en sorte qu’un élément ayant une hauteur et une largeur connues (au moins approximativement) flotte à droite et rest en bas, tout en se comportant comme un élément intégré aux autres éléments. Il est focalisé en bas à droite car vous pouvez le placer facilement dans n’importe quel autre coin grâce à d’autres méthodes.

J’avais besoin de créer une barre de navigation qui aurait les liens réels en bas à droite, et des éléments frères aléatoires, tout en s’assurant que la barre elle-même s’étirait correctement, sans perturber la mise en page. J’ai utilisé un élément “shadow” pour occuper l’espace des liens de la barre de navigation et l’ai ajouté à la fin des nœuds enfants du conteneur.


  
filler

Il n’y a rien qui s’appelle float:bottom en CSS. Le meilleur moyen consiste à utiliser le positionnement dans de tels cas:

 position:absolute; bottom:0; 
  #container{width:100%; float:left; position:relative;} #copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;} #container{background:gray; height:100px;} 
 

Pour ceux qui n’ont qu’un seul enfant dans le conteneur, vous pouvez utiliser l’approche de la table-cell et vertical-align qui a fonctionné de manière fiable pour positionner une seule div au bas de son parent.

Notez que l’utilisation de table-footer-group comme les autres réponses mentionnées rompra le calcul de la hauteur de la table parente.

 #container { display: table; width: 100%; height: 200px; } #item { display: table-cell; vertical-align: bottom; } 
 
Single bottom item

Div de style, position:absolute;bottom:5px;width:100%; fonctionne, mais il fallait plus de situation de défilement.

 window.onscroll = function() { var v = document.getElementById("copyright"); v.style.position = "fixed"; v.style.bottom = "5px"; }