Flexbox를 사용하여 머리글과 바닥글 사이의 공간을 채우는 DIV를 만들려면 어떻게 해야 합니까?

DIV를 만들어 머리글과 바닥글 DIV 사이 공간 채우기

웹사이트 레이아웃을 디자인할 때 머리글을 포함하는 것이 바람직한 경우가 많습니다. 바닥글과 콘텐츠 영역이 원활하게 흘러갑니다. 이러한 목적을 위해 DIV는 기존 표에 비해 더 큰 유연성을 제공합니다.

바닥글이 페이지 하단에 유지되고 콘텐츠 DIV가 머리글과 바닥글 사이의 공간을 채우도록 동적으로 조정되도록 하려면 간단한 솔루션이 필요합니다.

Flexbox 구현

Flexbox는 페이지의 요소를 배열하여 행과 열 모두로 흐르게 하는 수단을 제공합니다. 우리의 경우 머리글과 바닥글이 각각의 상단 및 하단 위치에 고정되어 열에 레이아웃이 흐르기를 원합니다.

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

설명

• flex-direction: 열은 flexbox를 사용하면 하위 항목을 세로로 정렬할 수 있습니다.
• flex: 머리글과 바닥글에 아무것도 없어 과도한 공간을 차지하지 않습니다.
• overflow-y: 스크롤을 사용하면 기본 콘텐츠 영역 내에서 세로 스크롤이 가능합니다. 페이지의 콘텐츠가 남은 공간에 맞는지 확인합니다.
• -webkit-overflow-scrolling: 터치는 터치 기기의 스크롤 동작을 최적화합니다.
• flex: auto는 기본 콘텐츠 영역이 나머지 공간을 동적으로 채우도록 허용합니다. 화면 해상도와 관계없이 머리글과 바닥글 사이에 공간이 있어야 합니다.

추가 고려 사항

콘텐츠가 사용 가능한 공간을 초과하는 경우 세로 스크롤 막대가 화면 해상도에 나타납니다.

Flexbox를 활용하면 고정된 머리글과 바닥글 사이의 공간을 채우도록 콘텐츠가 동적으로 조정되는 레이아웃을 쉽게 생성할 수 있으므로 반응성이 뛰어나고 시각적으로 매력적인 디자인을 얻을 수 있습니다.

위 내용은 Flexbox를 사용하여 머리글과 바닥글 사이의 공간을 채우는 DIV를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!