CSSのみを使用して残りの垂直スペースをDivで埋めるにはどうすればよいですか?

CSS のみを使用して、垂直方向のスペースを #second で応答的に埋める

質問:

どうすればよいですかCSS のみを使用して #wrapper 内の #first の下にある残りの垂直スペースを埋めます?

解決策:

これを実現するには、CSS のフレックスボックス プロパティを利用できます:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

HTML:

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

説明:

1. HTML の高さを 100% に設定し、 body をビューポートの高さ全体を占めるようにします。
2. display: flex を使用して親コンテナ .w​​rapper を作成します。
3. 子要素を垂直に配置するには、flex-direction: column を設定します。
4. 固定の高さを .first に割り当てて、そのサイズを決定します。
5. 残りの垂直方向のスペースを拡張して埋めることができるように、.sec に flex-grow: 1 を使用します。

以上がCSSのみを使用して残りの垂直スペースをDivで埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。