Làm cách nào để ngăn các đơn vị vh bỏ qua thanh cuộn?

Question

Tôi đang làm việc trên một bố cục trang với một thanh cuộn ngang. Tôi có một số bảng có chiều rộng cố định theo thứ tự ngang, tất cả đều có chiều cao khung nhìn. Tôi quyết định kiểm tra đơn vị vh để làm điều đó.

.panel { height: 100vh; } 

Điều này có hiệu quả, cho đến khi tôi nhận được thanh cuộn. Vấn đề là, vh bỏ qua chiều cao được sử dụng bởi thanh cuộn và do đó thêm thanh cuộn dọc.

Tôi muốn trừ chiều cao của thanh cuộn khỏi các phép đo của vh; có cách nào để làm điều này không?

Answer 1

Bạn có thể sử dụng phần tử cha với overflow-y: ẩn để đảm bảo rằng bạn không có thanh cuộn dọc và sau đó sử dụng an toàn 100vh bên trong nó. Đây là giả định rằng bạn thực sự cần 100vh vì lý do nào đó và không chỉ cần điền vào không gian dọc.

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; 
}