☰

親 div の高さを指定せずに、子 div の高さを親 div の高さの 100% に強制するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon html css
親 div の高さを指定せずに、子 div の高さを親 div の高さの 100% に強制するにはどうすればよいでしょうか? 質問する

次のような構造のサイトがあります。

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

おすすめ記事