CSS를 사용하여 래퍼 Div의 남은 세로 공간을 두 번째 Div로 채우는 방법은 무엇입니까?

CSS를 사용하여 수직 공간 채우기

질문:

#first가 포함된 #wrapper div가 있는 레이아웃이 있습니다. 및 #두 번째 div. CSS만 사용하여 #first 아래 #wrapper의 남은 세로 공간을 #second로 채워야 합니다.

해결책:

1. Flexbox 레이아웃:

   • 표시: flex 및 flex-direction: 열로 래퍼 div를 설정합니다. 이렇게 하면 세로 레이아웃이 설정됩니다.
   • 래퍼 높이를 100%로 설정합니다.

2. 높이 제어:

   • 첫 번째 div의 높이를 고정된 값(예: 50px)으로 설정하여 확장되지 않도록 합니다.

3. Flex- 성장 속성:

   • 두 번째 div에서 flex-grow 속성을 사용합니다. 이 속성을 사용하면 두 번째 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의 남은 세로 공간을 두 번째 Div로 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!