CSS で残りの垂直スペースを Div が占めるようにするにはどうすればよいですか?

残りの垂直スペースを CSS で埋める

指定された HTML には、ラッパー div (#ラッパー）。目標は、#first div を CSS だけで使用して、#first の下の残りの垂直スペースを占めることです。

これを実現するには、CSS コードを次のように変更します。

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

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

.first {
  height: 50px;
  background-color: #b2efd8;
}

.second {
  flex-grow: 1;
  background-color: #80c7cd;
}</code>

この改訂されたコードは、次のようになります。以下を定義してタスクを実行します:

• HTML 要素と body 要素の高さを 100% の高さに設定し、Web ページ全体が垂直方向に画面いっぱいになるようにします。
• #wrapper div を変更します。 display プロパティを「flex」に設定し、垂直方向の flex コンテナとして設定します。
• #first div に固定の高さを割り当て、垂直方向に 50 ピクセルを占めるようにします。
• flex-grow プロパティを適用します。これにより、#sec が #wrapper 内の残りの垂直方向のスペースを自動的に埋めることができます。

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