머리글과 바닥글 사이의 공간을 채우는 Div 배치 문제 해결

표에서 div 기반 레이아웃으로 전환할 때 일반적인 장애물이 발생합니다. 헤더, 콘텐츠, 바닥글 div. Flexbox를 사용하는 안정적인 접근 방식은 다음과 같습니다.

Flexbox 솔루션

Flex 레이아웃을 사용하면 공간을 동적으로 분배하여 자연스러운 머리글과 바닥글 높이를 허용하는 동시에 콘텐츠가 나머지 영역을 원활하게 채울 수 있습니다. 이는 머리글과 바닥글이 뷰포트의 위쪽 및 아래쪽 가장자리에 부착되어 기본 섹션 내에서 콘텐츠를 스크롤할 수 있도록 하는 기본 모바일 앱의 직관적인 동작을 모방합니다.

HTML 및 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의 유연성을 활용하면 웹페이지 내 공간을 우아하고 반응적으로 할당하여 화면 해상도에 관계없이 최적의 사용자 경험을 보장할 수 있습니다.