CSS를 사용하여 Div가 남은 수직 공간을 차지하도록 만드는 방법은 무엇입니까?

CSS로 남은 세로 공간 채우기

주어진 HTML에는 래퍼 div(# 싸개). 목표는 CSS로만 #second div를 사용하여 #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 및 본문 요소의 높이를 100% 높이로 설정하여 전체 웹페이지가 화면을 수직으로 채우도록 합니다.
• #wrapper div의 디스플레이 속성을 "flex"로 설정하고 수직 Flex 컨테이너로 구성합니다.
• #first div에 고정 높이를 할당하여 수직으로 50픽셀을 차지하도록 합니다.
• flex-grow 속성을 적용합니다. #second div에 값 1을 지정합니다. 이렇게 하면 #second가 #wrapper 내의 남은 수직 공간을 자동으로 채울 수 있습니다.

위 내용은 CSS를 사용하여 Div가 남은 수직 공간을 차지하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!