질문드립니다 css vh및 %관련

[서진환]

body
{
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    color: #fff ;
    background-color: #000;
    box-sizing: border-box;
}

.navBar
{
    display: flex;
    background: ivory;
    color: #000;
    margin: 0px;
    height: 5%;
    align-items: center;
}

.menuBar
{
    height: 95%;
    width: 10%;
    background: blue;
    float: left;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

강의다듣고 혼자만지작거리고있는데

body태그에서 높이를 브라우저 높이의 100%인 100vh를주고

상단고정 navBar에서 5%
사이드고정 menuBar에서 95%를 주고사용중임니다

근데 body태그의 100vh는 브라우저의 높이니까
사실상 menuBar에 100%를줘도 95%와 똑같이작동하지않을까 했는데 밑으로넘어가더라구요

그냥 원래그런건지 뭔지 갑자기 궁금해져서 여쭤봄니다.
그리고 밑으로넘어간건좋은데 왜 스크롤도안되는지 궁금합니다!

[codingapple]

navBar는 높이 5%
menuBar는 높이 95%를 차지하는데 갑자기 100%로 늘리면 밑으로 5% 초과되어서 그런게 아닐까요 

[글쓴이]

글