Tengo un problema de desplazamiento que puede ser común, pero parece que no puedo encontrarlo. Esencialmente, tengo una sección desplazable de una página web que va desde justo debajo del encabezado hasta la parte inferior de la pantalla. Sin embargo, para hacer que esa sección se pueda desplazar, tengo que establecer una altura que configuré como 70vh, mientras que el encabezado es una altura estática. Cuando la ventana gráfica cambia de altura, a una pantalla más grande, por ejemplo, el 70vh no es suficiente para alcanzar la parte inferior de la pantalla porque ahora debería ocupar más espacio proporcionalmente.
Mi pregunta es, ¿cómo hago para que la sección siempre tenga la altura correcta cuando la ventana gráfica cambia de tamaño? Una idea que tuve fue encontrar el porcentaje de la altura de la ventana gráfica que ocupa el encabezado y luego restar eso de 100 de forma variable, pero no tengo ni idea de cómo hacerlo.
Todavía no puedo agregar imágenes en mi publicación, pero este es un enlace a cómo se ve la sección
Puedes usar calc()
.scrollable { height: calc(100vh - 80px /* Height of your header */); } Sin embargo, deberá hacer esto para cada punto de interrupción en su sitio web, que cambia la altura de su encabezado, y 100vh a veces puede ser obstruido por los "elementos" de un navegador, como la barra de URL en el dispositivo móvil, etc.