css - positionne le div au bas du div contenant

118

Comment puis-je positionner un div au bas du div contenant?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

Ce code place le texte «à l'intérieur» au bas de la page.

css position

— nagy.zsolt.hun
source

Besoins extérieursposition: relative;

— impératif

relative, oui, et puis il ne sait pas quelle doit être la taille pour contenir le contenu div enfant, malheureusement, donc à moins qu'il ne s'agisse d'une valeur statique, revenons à la question d'origine. Comment placer un div au bas d'un autre div (implicite: "sans tout casser").

— JosephK

Réponses:

136

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Doit être

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Le positionnement absolu recherche le parent relativement positionné le plus proche dans le DOM, s'il n'est pas défini, il utilisera le corps.

— Karl
source

Merci. Pouvez-vous expliquer pourquoi?

— nagy.zsolt.hun

absoluterecherche le relativeparent le plus proche . Par défaut, c'est le bodydu document. Donc, si aucun objet DOM parent ( .outside) n'a la propriété d'être, relativevous .insideirez au bas de la balise body.

« Regards positionnement absolu pour le plus proche parent relativement positionné dans le DOM, si l' on ne définit pas , il utilisera le corps. » Vous venez d' expliquer si bien pour moi! Maintenant, je commence vraiment à comprendre le CSS. MERCI!

— Simon Forsberg

Absolute recherche en fait l'ancêtre positionné non par défaut (= statique) le plus proche, qui est souvent positionné relativement. Il ne doit pas non plus être un parent direct mais peut par exemple être un grand-parent.

— mzwaal le

Cela dépend de hauteurs constantes, ce qui est TRÈS MAUVAIS. Un simple changement de police, de taille de police, de remplissage, de marges et Dieu sait quoi d'autre exige une expérimentation pour deviner la nouvelle hauteur.

— Anderson

Attribuez position:relativeà .outside, puis position:absolute; bottom:0;à votre .inside.

Ainsi:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

— dsgriffin
source

cela pourrait être la base d'un pied de page collant, n'est-ce pas?

— cade galt

Je ne peux pas utiliser la position: absolue; pour la deuxième div. c'est ma restriction, pouvez-vous me donner d'autres options?

— Piyush Dholariya

Ajouter position: relativeà .outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

Les éléments qui sont positionnés de manière relative sont toujours considérés comme faisant partie du flux normal d'éléments dans le document. En revanche, un élément positionné de manière absolue est sorti du flux et ne prend donc pas de place lors du placement d'autres éléments. L'élément positionné de manière absolue est positionné par rapport à l'ancêtre positionné le plus proche. Si un ancêtre positionné n'existe pas, le conteneur initial est utilisé.

Le "conteneur initial" serait <body>, mais l'ajout de ce qui précède rend .outsidepositionné.

— Pilules d'explosion
source