Web/HTML&CSS

[CSS]height 100% vs 100vh

이번 포스트에서는 height 100% 속성과 100vh 라는 속성에 대해서 살펴보자.

main content로 화면을 꽉 채우고 싶어요!

화면을 구성하면서 main content 영역으로 화면을 꽉 채우고 싶은 경우가 많다.

위 과정을 처리할 때 height와 min-height 속성을 사용하는데 %단위를 사용하는 경우와 vh를 사용하는 경우에 대해 살펴보자.

다음과 같은 간단한 html을 이용해서 확인해보자.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            border: 1px solid blue;
        }

        .header,
        .footer {
            height: 50px;
        }

        .main {
            /* 100%에서 header와 footer의 높이를 빼줌*/
            height: calc(100% - 50px - 50px);
        }
    </style>
</head>

<body>
    <div class="header">
        여기는 header
    </div>
    <div class="main">
        여기는 main
    </div>
    <div class="footer">
        여기는 footer
    </div>
</body>

</html>

height: 100%는 요소의 부모의 높이를 100%로 채움

먼저 height는 요소를 감싸고 있는 부모의 높이를 100% 채운다는 이야기이다.

.main {
    background-color: brown;
    /* 100%에서 header와 footer의 높이를 빼줌*/
    height: calc(100% - 50px - 50px);
}

얼핏 생각하면 .main의 부모인 body를 100%채우면 잘 될것 같은데 생각처럼 채워지지 않는다. 문제는 브라우저 입장에서는 html > body > div의 계층이 있는데 html이나 body도 browser를 꽉 채워야 하위에 있는 div도 꽉 채울 수가 있다.

따라서 아래와 같은 내용이 추가되어야 한다.

html, body {
    height: 100%;
}

이처럼 height는 부모 요소에 의존적이다.

height: 100vh는 부모와 무관!

메인 화면처럼 부모와 상관 없이 화면을 채우고 싶은 경우는 vh(: view height)단위를 사용한다. vh 단위는 view port의 높이를 사용하기 때문에 부모와 상관없이 동작한다. 이제 html, body에 대한 height 속성을 지우고 .main을 아래와 같이 수정해보자.

.main {
    /* 100%에서 header와 footer의 높이를 빼줌*/
    /*height: calc(100% - 50px - 50px); */
    height: calc(100vh - 50px - 50px);
}

단순히 %를 사용할 때보다 훨씬 수월히 동일한 효과를 낼 수 있다. vh와 함께 당연히 vw도 존재하니까 필요에 따라서 사용해보자.

저작자표시 비영리 변경금지

'Web > HTML&CSS' 카테고리의 다른 글

[SCSS] 03. variable (1)	2022.09.15
[SCSS] 02. Style Rules (0)	2022.09.13
[SCSS] 01. SCSS 개요 (0)	2022.09.13
display:flex (0)	2020.09.10
html 요소의 가로 배치 (0)	2019.08.29

Contents

새소식