Flexbox를 사용하여 머리글과 바닥글 사이의 공간을 Div로 채우는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Flexbox를 사용하여 머리글과 바닥글 사이의 공간을 Div로 채우는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-19 06:10:03

원래의

692명이 탐색했습니다.

How to Fill the Space Between Header and Footer with Divs Using Flexbox?

머리글과 바닥글 사이의 공간을 Div로 채우기

레이아웃을 위해 표에서 div로 전환할 때 일반적인 과제는 원하는 배열을 유지하면서 동적 콘텐츠 높이를 수용하는 것입니다. 고정된 머리글과 바닥글 사이의 전체 공간을 채우는 div를 만드는 방법은 다음과 같습니다.

Flexbox 솔루션

Flex 레이아웃은 이 시나리오에 대한 우아한 솔루션을 제공하여 컨테이너 요소(머리글과 바닥글)를 허용합니다. ) 고정된 높이를 준수하면서 콘텐츠 영역이 자동으로 조정되도록 합니다. 이 설정은 모바일 앱의 기본 동작과 유사합니다.

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

로그인 후 복사

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

로그인 후 복사

이 설정에서 본문 div는 플렉스 컨테이너가 되고 하위 요소(머리글, 기본 및 바닥글)는 플렉스 항목이 됩니다. flex-direction 속성은 플렉스 항목의 방향(이 경우 수직(열))을 지정합니다.

머리글 및 바닥글 요소는 flex: none으로 설정됩니다. 즉, 플렉스 항목이 줄어들거나 늘어나지 않습니다. 초기 치수를 통해 고정된 높이를 유지합니다. 반면에 메인 요소는 flex: auto로 설정되어 남은 공간을 채워야 함을 나타냅니다.

또한, Overflow-y: scroll은 메인 요소에 적용되어 다음과 같은 경우 수직 스크롤을 도입합니다. 콘텐츠가 사용 가능한 공간을 초과합니다. -webkit-overflow-scrolling: touch 속성은 iOS 기기의 스크롤 동작을 개선합니다.

이 설정은 머리글과 바닥글이 각각의 상단 및 하단 위치에 고정된 상태로 유지되고 콘텐츠는 유연하고 동적인 레이아웃을 효과적으로 생성합니다. div는 다양한 화면 높이를 수용하여 그 사이의 공간을 원활하게 채웁니다.

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