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의 남은 세로 공간을 #second div로 채우려면 CSS만 사용하면 다음 단계를 수행할 수 있습니다.

여백 없이 높이를 100% 차지하도록 html과 본문을 설정합니다.
display: flex, flex-direction: 열을 상위 컨테이너 .wrapper.
특정 높이를 .first에 지정합니다.
flex-grow: 1을 .second로 설정하여 나머지 공간을 차지하도록 늘립니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!