vh-units이 스크롤바를 무시하는 것을 방지하려면 어떻게해야합니까?

Question

가로 스크롤 막대가있는 페이지 레이아웃 작업 중입니다. 가로 세로 순서로 고정 너비가있는 패널이 하나 있는데, 모두 뷰포트 높이가 있어야합니다. 나는 이것을하기 위해 vh 장치를 시험하기로 결정했다.

.panel { height: 100vh; } 

스크롤 막대가 나타날 때까지 정상적으로 작동합니다. 문제는 vh이 스크롤 막대에서 사용되는 높이를 무시하므로 세로 스크롤 막대가 추가된다는 것입니다.

vh의 측정 값에서 스크롤 막대의 높이를 뺍니다. 이 일을 할 수있는 방법이 있습니까?

Answer 1

overflow-y : hidden이있는 부모 요소를 사용하여 수직 스크롤 막대가 생기지 않도록하고 내부에 100vh를 안전하게 사용할 수 있습니다. 이것은 어떤 이유로 든 실제로 100vh가 필요하고 수직 공간을 채울 필요가 없다고 가정합니다.

HTML

<div id="main"> 
    <div id="container"></div> 
</div> 

CSS

#main { 
    width:200vw; 
    height:100%; 
    background: red; 
    position: absolute; 
    overflow-y: hidden; 
} 

#container { 
    height: 100vh; 
    width:10px; 
    background: blue; 
}