Me encuentro con este problema con un programa en el que estoy trabajando y no puedo encontrar la solución. Básicamente, tengo una aplicación web, en el renderizado inicial, la página completa tiene una altura X. Hay un color de fondo, y ese color cubre la altura completa de la página.
Momentos después del procesamiento inicial, los datos se obtienen de forma asincrónica y se agregan a la página. Los datos hacen que la altura total de la página aumente. Desafortunadamente, solo la altura original de la página muestra el color de fondo, debajo de eso, el fondo se vuelve blanco.
En una investigación más profunda, descubrí que esto se debe a que un div principal no cambia el tamaño cuando lo hace el div secundario. Básicamente, el div que obtiene elementos agregados por la carga de datos asíncrona crece en altura, pero el padre que lo envuelve (y el que tiene el color de fondo) no lo hace.
Durante mi investigación, encontré una solución parcial: establecer la "altura" en "auto". El problema con esta solución es que cuando la página se carga inicialmente, el color de fondo solo se aplica a la parte de la página con contenido real, en lugar de llenar la pantalla. Entonces, si tengo la altura en "automático", el color se arruina cuando la página se carga por primera vez antes de corregirse después de agregar los elementos, y si la altura es "100%", entonces el color se arruina después de que se agregan los elementos. .
He creado un archivo HTML barebones que vuelve a crear el problema:
<!DOCTYPE html> <html> <head> <title>Layout Test</title> <style> * { margin: 0; padding: 0; } html { height: 100%; margin: 0; padding: 0; } body { margin: 0; padding: 0; height: 100%; } #root { background-color: cyan; height: 100%; } #root > h1 { text-align: center; } </style> </head> <body> <div id="root"> <h1>Layout Test</h1> <div id="container"></div> </div> <script> setTimeout(() => { const container = document.querySelector('#container'); for (let i = 0; i < 100; i++) { const h1 = document.createElement('h1'); h1.textContent = 'Hello'; container.appendChild(h1); } }, 1000); </script> </body> </html>Puede establecer min-height: 100vh; en el #root CSS para que siempre sea al menos la altura de la ventana gráfica.
Establecer una altura mínima de 100% en la #raíz, en lugar de una altura, parece funcionar:
<!DOCTYPE html> <html> <head> <title>Layout Test</title> <style> * { margin: 0; padding: 0; } html { height: 100%; margin: 0; padding: 0; } body { margin: 0; padding: 0; height: 100%; } #root { background-color: cyan; min-height: 100%; } #root > h1 { text-align: center; } </style> </head> <body> <div id="root"> <h1>Layout Test</h1> <div id="container"></div> </div> <script> setTimeout(() => { const container = document.querySelector('#container'); for (let i = 0; i < 100; i++) { const h1 = document.createElement('h1'); h1.textContent = 'Hello'; container.appendChild(h1); } }, 1000); </script> </body> </html>Podrías usar height: fit-content; y width: fit-content; en el elemento padre