高さが不明な場合、子 Div を親の高さまで伸ばすにはどうすればよいですか?

親の高さに合わせて子 Div をストレッチする

子 Div の高さを一致させる必要がある、前述のような状況に遭遇した場合親の高さは一致しますが、親の高さが不明な場合は、フレックスボックスを使用して解決策を見つけることができます。

実現するには子 div の垂直スケーリングを行うには、親要素には次のスタイルが必要です:

display: flex;

さらに、ブラウザ間の互換性を確保するためにブラウザのプレフィックスを追加する必要があります。

align-items: ストレッチ;財産も重要です。ただし、これはフレックス ボックスの align-items のデフォルト値であるため、別の値を使用する場合を除き、明示的に設定する必要はありません。

フレックスボックスの 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>

この例では、other-child div のみが存在します。親の身長を伸ばす目的で。その結果、子 div は親の調整可能な高さの 100% を占めることになります。

以上が高さが不明な場合、子 Div を親の高さまで伸ばすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。