Wie verhindert man, dass VH-Einheiten die Bildlaufleiste ignorieren?

Question

Ich arbeite an einem Seitenlayout mit einer horizontalen Bildlaufleiste. Ich habe einige Panels mit festen Breiten in einer horizontalen Reihenfolge, die alle die Ansichtsfensterhöhe haben sollten. Ich entschied mich, die vh Einheit zu testen, um das zu tun.

.panel { height: 100vh; } 

Das funktioniert gut, bis ich eine Bildlaufleiste bekomme. Das Problem ist, dass vh die von der Bildlaufleiste verwendete Höhe ignoriert und daher eine vertikale Bildlaufleiste hinzufügt.

Ich möchte die Höhe der Bildlaufleiste von den Messungen von vh subtrahieren; Gibt es einen Weg, dies zu tun?

Answer 1

Sie könnten ein übergeordnetes Element mit overflow-y: hidden verwenden, um sicherzustellen, dass Sie keine vertikale Bildlaufleiste erhalten und dann sicher 100vh darin verwenden. Dies setzt voraus, dass Sie aus irgendeinem Grund tatsächlich 100vh benötigen und nicht nur den vertikalen Platz ausfüllen müssen.

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