height : 100 % 또는 min-height : html 및 body 요소의 경우 100 %?
레이아웃을 설계하는 동안 나는 설정 html, body
요소 ' height
에 100%
무엇을 사용해야하므로,이 오류가 발생하지만, 일부의 경우를?
html, body {
height: 100%;
}
또는
html, body {
min-height: 100%;
}
글쎄, 이것은 각 방법에 자체 결함이 있으므로 의견 기반이 아닙니다. 그래서 권장되는 방법은 무엇이며 그 이유는 무엇입니까?
당신은에 배경 이미지를 적용하려고하지하는 경우 html
와 body
둘, 전체 브라우저 창을 채울 것이다. 대신 사용 :
html {
height: 100%;
}
body {
min-height: 100%;
}
내 추론은 다음과 같습니다 (여기서는 이러한 방식으로 배경을 적용하는 방법을 전체적으로 설명합니다).
덧붙여서,
height
와min-height
tohtml
및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 %.
참고 URL : https://stackoverflow.com/questions/17555682/height-100-or-min-height-100-for-html-and-body-elements
'Program Tip' 카테고리의 다른 글
C ++에서 cin에서 EOF까지 읽는 방법 (0) | 2020.10.28 |
---|---|
Android 애플리케이션에 외부 글꼴을 추가하는 방법 (0) | 2020.10.28 |
열거 형 클래스를 무순 맵 키로 사용할 수 없습니다. (0) | 2020.10.28 |
Android 스튜디오 오류 : Error : CreateProcess error = 216,이 버전의 % 1은 실행중인 Windows 버전과 호환되지 않습니다. (0) | 2020.10.28 |
accepts_nested_attributes_for 하위 연결 유효성 검사 실패 (0) | 2020.10.28 |