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

DDD
풀어 주다: 2024-10-31 03:11:02
원래의
929명이 탐색했습니다.

How to Fill Remaining Vertical Space with a Div using Only CSS?

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿