높이 또는 최소 높이: HTML 및 본문 요소 레이아웃에 가장 적합한 것은 무엇입니까?

레이아웃의 HTML 및 본문 요소에 대한 높이와 최소 높이

레이아웃을 설정할 때 개발자는 일반적으로 두 높이 중 하나를 사용합니다: 100% 또는 최소 높이: html 및 본문 요소의 경우 100%입니다. 그러나 이러한 방법은 특정 시나리오에서 실패하는 경우가 많아 디자이너는 어떤 접근 방식이 더 바람직한지 고민하게 됩니다.

높이: 100%

html과 본문 모두에서 높이: 100% 사용 요소는 뷰포트 높이로 고정합니다. 이 방법은 전체 브라우저 창을 채우는 배경 이미지를 효과적으로 적용합니다. 그러나 콘텐츠가 늘어나면서 몸체가 확장되는 것을 방지하여 뷰포트 접힌 부분 아래에 원치 않는 간격이 생깁니다.

최소 높이: 100%

최소 높이 지정: html 및 body 요소 모두 100%에서는 본문이 뷰포트 높이까지 확장되어 콘텐츠 스크롤이 가능해집니다. 그러나 이 방법은 html에 명시적인 높이가 있는 경우에만 작동합니다.

권장 접근 방식

브라우저 창을 채우는 배경 이미지의 경우 권장 솔루션은 다음과 같습니다.

html {
  height: 100%;
}

body {
  min-height: 100%;
}

이 접근 방식을 사용하면 HTML이 뷰포트 높이를 결정하고 필요에 따라 본문을 확장하여 간격과 콘텐츠를 모두 피할 수 있습니다. Overflow.

추가 고려 사항

Html과 본문에는 고유 높이가 없으므로 명시적 높이: 자동이 기본적으로 할당됩니다. html은 뷰포트에서 높이를 파생하므로 이러한 요소에 적용된 배경 이미지는 html 내에서 명시적으로 지정되어야 합니다.

명시적인 html 높이가 없는 min-height: 100%는 예상치 못한 동작으로 이어질 수 있으므로 CSS 사양( CSS2.1의 섹션 10)에서는 이러한 기술에 대한 철저한 설명을 제공합니다.

위 내용은 높이 또는 최소 높이: HTML 및 본문 요소 레이아웃에 가장 적합한 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!