CSS Flexbox を使用してコンテナ内の残りの垂直スペースを埋めるにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS Flexbox を使用してコンテナ内の残りの垂直スペースを埋めるにはどうすればよいですか?

Susan Sarandon

リリース： 2024-10-28 08:42:02

オリジナル

445 人が閲覧しました

How to Fill Remaining Vertical Space in a Container with CSS Flexbox?

残りの垂直方向のスペースを #second で埋める

#first の下にある #wrapper の残りの垂直方向のスペースを #first div で埋めるには、次を使用します。 CSS のみを使用する場合は、次の手順を実行できます。

余白なしで 100% の高さを占めるように HTML と本文を設定します。
display: flex, flex-direction: column を親コンテナ .wrapper.
.first に特定の高さを与えます。
残りのスペースを占めるように伸縮させるには、flex-grow: 1 を .sec に設定します。

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>

ログイン後にコピー

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

ログイン後にコピー

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