親<div>の下部に内部<div>を送信するにはどうすればよいですか？

以下の別のdiv画像とコード内のdiv。親divのテキストと画像があるからです。そして、赤いdivは親divの最後の要素になります。

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

これは片道です

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

ただし、内側のdivは絶対的に配置されるため、外側のdiv内の他のコンテンツがそれに重なることを常に心配する必要があります（常に、高さを固定に設定する必要があります）。

できる場合は、その内側のdivを外側のdivの最後のDOMオブジェクトにして、「クリア：両方」に設定することをお勧めします。

フレックスボックスの方法。

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

編集：

ソース-Flexboxガイド

フレックスボックスのブラウザサポート-Caniuse

外側のdiv position="relative"と内側のdivを作成しposition="absolute"、に設定しbottom="0"ます。

これは、要素のフローに影響を与えない別の純粋なCSSトリックです。

#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>

絶対配置はリフローを妨げるので望ましくない場合があります。状況によっては、祖父母要素display:table;と親要素を作成することをお勧めしますdisplay:table-cell;vertical-align:bottom;。これを実行すると、子要素を指定できるようになり、display:inline-block;自動的に親の下部に向かって流れます。

注：これは、決して最良の方法ではありません！

状況：私は余分なdivを追加できなかったのと同じように同じことをしなければならなかったので、innerHTMLを削除して、2つのレンダリングとほとんど同じようにjavascriptを介して別のhtmlを作成するのではなく、下部（アニメーションバー）。

解決策： 当時私がどれほど疲れていたかを考えると、そのような方法を考えることも普通のようですが、バーの高さの開始点である親DOM要素があることを知っていました。

JavaScriptをいじるのではなく、（常に良いアイデアではない）CSSの回答を使用しました！:)

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

はい、そうです。DOMを配置する代わりに、CSSで親を上下逆にしました。

私のシナリオではそれはうまくいきます！おそらく他の人にも！フレームなし！:)

親の身長がわかっている場合、絶対divとテーブルを回避する方法は次のとおりです。

<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：

例

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