Use these instead of vh
min-height:100vh;
min-height:100dvh;
https://caniuse.com/?search=dvh
"dvh" | Can I use... Support tables for HTML5, CSS3, etc
Small, Large, and Dynamic viewport units Viewport units similar to `vw` and `vh` that are based on shown or hidden browser UI states to address shortcomings of the original units. Currently defined as the `sv*` units (`svb`, `svh`, `svi`, `svmax`, `svm
caniuse.com
The problems with viewport units
기존에 참조했던 joshwcomeau.com 글은 업데이트 되어서 관련 내용이 삭제된 상태->
( link: June 2023 — I removed the height: 100% from html and body. This rule was added to make it possible to use percentage-based heights within the application. Now that dynamic viewport units are well-supported, however, this hacky fix is no longer required.)
joshwcomeau.com vh를 쓰지 않는 이유:
You might be wondering: why fuss with percentage-based heights at all? Why not use the vh unit instead? link
모바일에서는 vh를 100% 이상으로 계산한다.
The problem is that the vh unit doesn't work properly on mobile devices; 100vh will take up more than 100% of the screen real estate, because mobile browsers do that thing where the browser UI comes and goes.
In the future, new CSS units will solve for this. Until then, I continue using percentage-based heights.
https://codepen.io/silvio-r/pen/gOxgJbq
css의 주석참조 :
html, body {
/*
height: 100%;
- this can cause bugs in js with:
- document.body.offsetHeight
- document.documentElement.clientHeight
- document.documentElement.offsetHeight
*/
min-height: 100vh;
/*
Better but, even min-height:100vh causes wrong
document.documentElement.clientHeight 😥
*/
