티스토리 뷰
모바일에서 height: 100vh; 버그픽스
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>모바일 100vh 버그픽스</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#fdbd39" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#121826" media="(prefers-color-scheme: dark)" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box;}
body, html { width:100%; height:100%;}
#wrap { height: calc(var(--vh, 1vh) * 100); min-height: calc(var(--vh, 1vh) * 100); border: 4px solid red;}
</style>
</head>
<body>
<div id="wrap">
본문
</div>
<script>
function setScreenSize() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setScreenSize();
window.addEventListener('resize', () => setScreenSize());
</script>
</body>
</html>'HTML > 레이아웃' 카테고리의 다른 글
| 세로 고정형 레이아웃 (0) | 2021.12.10 |
|---|