CSS만 사용하여 Div로 남은 세로 공간을 채우는 방법은 무엇입니까?

CSS만 사용하여 #second로 세로 공간을 반응적으로 채우기

질문:

어떻게 할 수 있나요? CSS만 사용하여 #wrapper 내 #first 아래의 나머지 세로 공간을 채웁니다.

해결책:

이를 달성하려면 CSS의 flexbox 속성을 활용할 수 있습니다.

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

HTML:

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

설명:

1. html의 경우 높이를 100%로 설정하고 body가 뷰포트의 전체 높이를 차지합니다.
2. display: flex를 사용하여 상위 컨테이너 .wrapper를 만듭니다.
3. flex-direction: 열을 설정하여 하위 요소를 수직으로 정렬합니다.
4. .first에 고정 높이를 할당하여 크기를 결정합니다.
5. .second에 flex-grow: 1을 사용하여 나머지 수직 공간을 확장하고 채울 수 있습니다.

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