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

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

Patricia Arquette

풀어 주다： 2024-11-10 03:23:02

원래의

284명이 탐색했습니다.

How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?

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

테이블 기반 레이아웃에서 div 사용으로 전환할 때 머리글, 내용, 바닥글 사이의 간격을 적절하게 유지하기 요소는 어려울 수 있습니다. Flexbox를 사용하는 효과적인 솔루션은 다음과 같습니다.

Flexbox 솔루션

Flexbox는 유연하고 반응성이 뛰어난 레이아웃을 허용하여 콘텐츠 영역이 나머지 부분을 채우는 동안 머리글과 바닥글은 고정된 상태로 유지됩니다. space.

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

로그인 후 복사

이 코드를 사용하면 본문 요소가 Flexbox 열로 표시되고 머리글과 바닥글은 flex: none으로 설정하면 확장하거나 축소할 수 없음을 나타냅니다. 콘텐츠가 포함된 기본 요소는 flex:auto로 설정되어 나머지 공간을 모두 차지할 수 있습니다. Overflow-y 및 -webkit-overflow-scrolling 속성을 사용하면 콘텐츠가 기본 요소 내에서 수직으로 스크롤될 수 있습니다.

이 접근 방식을 사용하면 다양한 화면 해상도에 맞게 조정되는 동적 레이아웃이 가능해 헤더와 콘텐츠가 사용 가능한 공간을 채우는 동안 바닥글은 고정된 상태로 유지됩니다.

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