[html] height : 100 % 또는 min-height : html 및 body 요소의 경우 100 %?

Program / 글쓴이

레이아웃을 설계하는 동안 나는 설정 html, body요소 ‘ height에 100%무엇을 사용해야하므로,이 오류가 발생하지만, 일부의 경우를?

html, body {
   height: 100%;
}

또는 

html, body {
   min-height: 100%;
}

글쎄, 이것은 각 방법에 자체 결함이 있으므로 의견 기반이 아닙니다. 그래서 권장되는 방법은 무엇이며 그 이유는 무엇입니까?

답변

당신은에 배경 이미지를 적용하려고하지하는 경우 html와 body둘, 전체 브라우저 창을 채울 것이다. 대신 사용 :

html {
   height: 100%;
}

body {
   min-height: 100%;
}

내 추론은 다음과 같습니다 (여기서는 이러한 방식으로 배경을 적용하는 방법을 전체적으로 설명합니다).

덧붙여서, height와 min-heightto html및 body각각 을 지정해야하는 이유 는 두 요소 모두 고유 높이가 없기 때문입니다. 둘 다 height: auto기본값입니다. 높이가 100 % 인 뷰포트이므로 height: 100%뷰포트에서 가져온 다음 body콘텐츠 스크롤을 허용하기 위해 최소로 적용됩니다 .

height: 100%두 가지를 모두 사용하는 첫 번째 방법 body은 콘텐츠가 뷰포트 높이 이상으로 커지기 시작하면 콘텐츠와 함께 확장되는 것을 방지 합니다. 기술적으로 이것은 콘텐츠가 스크롤되는 것을 막지 는 않지만 body, 일반적으로 바람직하지 않은 폴드 아래에 틈 이 생기는 원인이 됩니다.

두 번째 방법은, 사용 min-height: 100%모두에 발생하지 않습니다 body의 전체 높이로 확장하기 html때문에 min-height비율이 작동하지 않습니다와 함께 body하지 않는 한 html명시 적있다 height.

완전성을 위해 CSS2.1의 섹션 10 에는 모든 세부 정보가 포함되어 있지만 매우 복잡한 읽기이므로 여기에서 설명한 내용 이외의 내용에 관심이 없다면 건너 뛸 수 있습니다.

답변

뷰포트 높이 ( vh) 단위를 사용할 수 있습니다 .

body {
    min-height: 100vh;
}

부모 높이가 아니라 화면에 상대적이므로 html 높이가 필요하지 않습니다 : 100 %.

답변