この同じ問題にしばらく取り組んだ後、ようやく私の要件のすべてを満たすソリューションを見つけました。
- コンテナの高さを知っている必要はありません。
- 相対+絶対ソリューションとは異なり、コンテンツはそれ自体のレイヤーに浮かびません（つまり、通常はコンテナーdivに埋め込まれます）。
- ブラウザ間で動作します（IE8 +）。
- 実装が簡単です。
解決策は1つだけです<div>。これを「アライナー」と呼びます。
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
このトリックは、テキストベースラインをコンテナーの下部にプッシュする背の高い細いdivを作成することで機能します。
これは、OPが求めていたものを達成する完全な例です。「bottom_aligner」は、デモンストレーションのみを目的として厚く赤くしています。
CSS：
.outer-container {
border: 2px solid black;
height: 175px;
width: 300px;
}
.top-section {
background: lightgreen;
height: 50%;
}
.bottom-section {
background: lightblue;
height: 50%;
margin: 8px;
}
.bottom-aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 3px;
background: red;
}
.bottom-content {
display: inline-block;
}
.top-content {
padding: 8px;
}
HTML：
<body>
<div class="outer-container">
<div class="top-section">
This text
<br> is on top.
</div>
<div class="bottom-section">
<div class="bottom-aligner"></div>
<div class="bottom-content">
I like it here
<br> at the bottom.
</div>
</div>
</div>
</body>
