Flexbox를 사용하여 고정 머리글과 바닥글 사이에 유동 콘텐츠 DIV를 어떻게 만들 수 있나요?

머리글과 바닥글 사이에 유동적 콘텐츠 DIV 만들기

현대적인 레이아웃 디자인을 추구하면서 테이블에서 div로 전환했습니다. 머리글, 바닥글 및 콘텐츠 div를 정렬해야 하는 문제에 직면하여 다양한 화면 해상도를 충족하는 우아한 솔루션을 찾고 있습니다.

이 레이아웃 딜레마에 대한 강력한 솔루션을 제공하는 Flexbox 접근 방식을 고려해 보세요. Flexbox의 고유 기능을 활용하면 원하는 결과를 얻을 수 있습니다. 즉, 남은 공간을 원활하게 채우고 경계 내에서 부드러운 스크롤을 허용하는 콘텐츠 영역이 포함된 고정 머리글 및 바닥글 요소입니다.

Flexbox 구현

Flexbox 구현은 간단하며 몇 가지 HTML과 CSS가 필요합니다. 변경:

HTML:

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

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

이 설정은 머리글과 바닥글 요소를 잠급니다. 지정된 크기 내에서 콘텐츠 영역을 동적으로 확장하여 나머지 수직 공간을 채울 수 있습니다. Overflow-y 및 -webkit-overflow-scrolling 속성은 콘텐츠 영역의 높이를 초과하는 모든 콘텐츠가 해당 범위 내에서 원활하게 스크롤되도록 보장합니다.

Flexbox의 유연성과 다양성을 수용하고 원활하게 적응하는 조화로운 레이아웃을 쉽게 만듭니다. 다양한 화면 해상도로.

위 내용은 Flexbox를 사용하여 고정 머리글과 바닥글 사이에 유동 콘텐츠 DIV를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!