CSSを使用してラッパーDivの残りの垂直スペースを2番目のDivで埋める方法は?

CSS を使用して垂直方向のスペースを埋める

質問:

#first を含む #wrapper div を持つレイアウトがあります。と #2 番目の div です。 CSS のみを使用して、#first の下にある #wrapper の残りの垂直スペースを #second で埋める必要があります。

解決策:

1. Flexbox レイアウト:

   • ラッパー div を表示: flex および flex-direction: 列に設定します。これにより、垂直レイアウトが設定されます。
   • ラッパーの高さを 100% に設定します。

2. 高さコントロール:

   • 拡張されないように、最初の div の高さを固定値 (例: 50px) に設定します。

3. Flex- Grow プロパティ:

   • 2 番目の div で flex-grow プロパティを使用します。このプロパティにより、2 番目の div を垂直方向に拡張して残りのスペースを埋めることができます。柔軟にするには、flex-grow を 1 に設定します。

コード例:

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

以上がCSSを使用してラッパーDivの残りの垂直スペースを2番目のDivで埋める方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。