Comment puis-je envoyer un <div> intérieur au bas de son parent <div>?

Le div dans une autre image div et le code ci-dessous. Parce qu'il y aura du texte et des images de la div parent. Et le div rouge sera le dernier élément du div parent.

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

C'est une façon

<div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;">

    <div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;">
    </div>
</div>

Mais comme la div interne est positionnée de manière absolue, vous devrez toujours vous soucier des autres contenus de la div externe qui la chevauchent (et vous devrez toujours définir des hauteurs fixes).

Si vous pouvez le faire, il est préférable de faire de cette div interne le dernier objet DOM de votre div externe et de la définir sur "clear: both".

Une manière flexbox.

HTML:

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}

Éditer:

Source - Guide Flexbox

Prise en charge du navigateur pour flexbox - Caniuse

Créez le div externe position="relative"et le div interne position="absolute"et définissez-le bottom="0".

Voici une autre astuce CSS pure, qui n'affecte pas un flux d'éléments.

#parent {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}

<div id="parent">
  <h1>Positioning with margin</h1>
  <div class="child">
    Content to the bottom
  </div>
</div>

Il se peut que vous ne souhaitiez pas un positionnement absolu car il rompt la redistribution: dans certaines circonstances, une meilleure solution consiste à créer l'élément grand-parent display:table;et l'élément parent display:table-cell;vertical-align:bottom;. Après cela, vous devriez pouvoir donner les éléments enfants display:inline-block;et ils couleront automatiquement vers le bas du parent.

Remarque: ce n'est en aucun cas la meilleure façon de procéder!

Situation : je devais faire la même chose mais seulement je ne pouvais pas ajouter de div supplémentaires, donc j'étais coincé avec ce que j'avais et plutôt que de supprimer innerHTML et de créer un autre via javascript presque comme 2 rendus dont j'avais besoin pour avoir le contenu au en bas (barre animée).

Solution: Compte tenu de ma fatigue à l'époque, il semble normal de penser à une telle méthode, mais je savais que j'avais un élément DOM parent dont la hauteur de la barre commençait.

Plutôt que de jouer avec le javascript, j'ai utilisé une réponse CSS ( PAS TOUJOURS BONNE IDÉE )! :)

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

Oui c'est correct, au lieu de positionner le DOM, j'ai retourné son parent en css.

Pour mon scénario, cela fonctionnera! Peut-être pour d'autres aussi! Pas de flamme! :)

Voici un moyen d'éviter les div absolus et les tables si vous connaissez la hauteur du parent:

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS:

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle:

Exemple

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>