0
339
Views¿Cómo calcular la altura de la pantalla y colocar un elemento debajo del pliegue?
Tengo un envoltorio principal con una imagen de fondo y la imagen de fondo debe extenderse para cubrir todos estos elementos. Mi HTML se ve así:
<div id="main-wrapper"> <div id="header"></div> <div id="scroll-down-arrow"></div> <div class="additional-content"></div> </div>Me gustaría calcular la altura del tamaño de la pantalla y colocar la "flecha de desplazamiento hacia abajo" en la parte inferior de la pantalla y luego colocar "contenido adicional" debajo del pliegue (área no visible de la pantalla).
He leído el tutorial de posicionamiento aquí en W3 School: https://www.w3schools.com/Css/css_positioning.asp pero todavía no puedo encontrar la mejor manera de lograr esto y colocar el contenido debajo del pliegue mientras mantengo el fondo tamaño de la imagen del envoltorio principal.
Así es como se ve mi maqueta, digamos que el borde azul es el área visible en la pantalla, luego los elementos deben organizarse de esta manera:
Preferiblemente, me gustaría que esto fuera CSS puro, pero también estoy abierto a hacer el cálculo de la altura de la pantalla con JS, siempre que responda a dispositivos móviles. ¿Puedes compartir un Pen o un código de muestra si has hecho algo similar a esto?
1 answers
Answer question0
La altura de la ventana gráfica es window.innerHeight , por lo que todo lo que se coloque más allá de eso estará fuera de la pantalla debajo, y todo lo que se coloque antes de eso (como element.top + element.height < 0) estará fuera de la pantalla arriba.
(Para ayudar con eso, siempre puede obtener "la posición real de un elemento en la página, ahora mismo", probablemente element. getBoundingClientRect() )
Sin embargo, tenga en cuenta que "el pliegue" es una idea terrible dada la gran variedad de posibles tamaños de navegador, no solo de escritorio frente a móvil, sino también dentro de las clases de escritorio y móvil.
En lugar de tratar de averiguar dónde está el pliegue, solo asegúrese de que su contenido principal tenga CSS de tal manera que la mayor parte sea inmediatamente visible en varios puntos de interrupción de tamaño de medios en lugar de intentar colocar las cosas según las coordenadas de la ventana gráfica/elemento después de la hecho.
Y recuerda que las unidades CSS vw y vh existen específicamente para este fin.