次のような構造のサイトがあります。
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
ナビゲーションは左側にあり、コンテンツ div は右側にあります。コンテンツ div の情報は PHP を通じて取得されるため、毎回異なります。
どのページが読み込まれても、ナビゲーションの高さがコンテンツ div の高さと同じになるように、ナビゲーションを垂直方向に拡大縮小するにはどうすればよいですか?
ベストアンサー1
保護者向け:
display: flex;
いくつか接頭辞を追加する必要があります。http://css-tricks.com/using-flexbox/。
align-items: stretch; も必要ですが、stretchは のデフォルト値なのでalign-items、明示的に設定する必要はありません。ただし、異なる値に設定するalign-itemsと問題が発生します。 (技術的に言うと、normalは実際には のデフォルト値ですalign-itemsが、フレックスボックスのコンテキストでは と同じように動作しますstretch)
補足: は、align-items追加先の要素ではなく、子要素に適用されます。子の伸縮を定義する場合は、 を使用できますalign-self。
.parent {
background: red;
padding: 10px;
display:flex;
}
.other-child {
width: 100px;
background: yellow;
height: 150px;
padding: .5rem;
}
.child {
width: 100px;
background: blue;
}<div class="parent">
<div class="other-child">
Only used for stretching the parent
</div>
<div class="child"></div>
</div>