css - vmin - ¿Cómo evitar que vh-units ignore la barra de desplazamiento?

viewport height css

Question

Estoy trabajando en un diseño de página con una barra de desplazamiento horizontal. Tengo algunos paneles con anchos fijos en un orden horizontal, que deben tener la altura de la ventana gráfica. Decidí probar la unidad vh para hacer eso.

.panel { height: 100vh; }

Esto funciona bien, hasta que aparece una barra de desplazamiento. El problema es que vh ignora la altura utilizada por la barra de desplazamiento y, por lo tanto, agrega una barra de desplazamiento vertical.

Me gustaría restar la altura de la barra de desplazamiento de las medidas de vh ; ¿Hay alguna manera de hacer esto?

Answer 1

Podría usar un elemento padre con desbordamiento-y: oculto para asegurarse de que no obtiene una barra de desplazamiento vertical y luego usar con seguridad 100vh en su interior. Esto es asumiendo que realmente necesitas 100vh por alguna razón y no solo necesitas llenar el espacio vertical.

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