HTML 및 본문 높이: `높이: 100%` 대 `최소 높이: 100%` – 어느 것을 사용해야 합니까?

HTML 및 Body 요소의 높이와 최소 높이

레이아웃을 디자인할 때 많은 개발자가 html 및 body 요소의 높이를 설정합니다. 100%로. 그러나 이 접근 방식에는 때때로 문제가 발생할 수 있습니다. 이 문서에서는 이러한 요소에 대한 높이: 100%와 최소 높이: 100%의 차이점을 살펴보고 사용에 대한 권장 사항을 제공합니다.

배경, HTML 및 본문 요소

html과 body 요소 모두 고유 높이가 부족합니다. 기본적으로 height:auto로 설정되어 있습니다. 높이: 100%가 이러한 요소에 적용되면 높이는 뷰포트에서 결정되어 전체 브라우저 창을 채울 수 있습니다.

높이: 100% 대 최소 높이: 100%

• 높이: 100%: 이 설정 요소의 높이를 상위 컨테이너의 100%로 고정합니다. html과 본문 모두에 적용하면 전체 뷰포트를 채우지만 이 접근 방식을 사용하면 뷰포트 높이를 초과하는 콘텐츠를 수용하기 위해 본문이 확장되지 않아 잠재적으로 눈에 띄는 간격이 남을 수 있습니다.
• min-height : 100%: 이 설정은 요소의 최소 높이를 설정합니다. html과 본문 모두에 적용하면 본문이 필요에 따라 확장될 수 있지만 콘텐츠가 부족한 경우 뷰포트를 채울 것이라는 보장은 없습니다.

권장사항: html에서 높이: 100%를 사용하세요. 및 최소 높이: 본문에서 100%

전체 브라우저 창에 걸쳐 있는 배경 이미지의 경우 권장되는 접근 방식 HTML에서는 height: 100%, 본문에서는 min-height: 100%를 설정하는 것입니다. 이렇게 하면 HTML이 전체 뷰포트를 채우고 배경 캔버스를 제공하는 동시에 본문은 필요에 따라 수직으로 확장되어 콘텐츠를 수용할 수 있습니다.

위 내용은 HTML 및 본문 높이: `높이: 100%` 대 `최소 높이: 100%` – 어느 것을 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!