Quiero lograr el diseño del fragmento a continuación:
#title div El problema con este fragmento es que rompe por completo la jerarquía semántica del HTML. El #uglyWrapper divide el artículo en dos partes.
Podría usar #title { height: calc(100vh - $nav-height) } , pero la barra superior es un flexbox en sí mismo. Entonces $nav-height es desconocido.
¿Existe una solución solo de CSS que no interfiera con esta estructura HTML?
body nav article #title textFragmento que demuestra cómo debería verse :
#uglyWrapper { height: 100%; display: flex; flex-direction: column; } #title { background-color: lightblue; height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } nav { background-color: grey; } <body> <div id="uglyWrapper"> <nav>top nav with unknown height, not fixed</nav> <!-- article --> <div id="title">Full height title image</div> </div> Article continues <br> much text <br> much text <br> much text <!-- /article --> </body>Dirigiéndose a la respuesta de mfluehr :
Este enfoque no llena el espacio restante. En su lugar, ocupa toda la altura de la pantalla y queda recortada por la barra de encabezado. Dejé los detalles sobre la imagen intencionalmente fuera de la pregunta pidiendo un div en su lugar. Porque hay otros elementos en ese div que requieren un diseño preciso. Por lo tanto, cubrir un área de tamaño desconocido es problemático. Por favor, no se quede atascado en los detalles de la imagen y utilice el ejemplo mínimo. Puedo hacer que funcione desde allí.
No estoy seguro, pero pruebe esta solución agregando display: grid en el elemento #uglyWrapper .
#uglyWrapper { height: 100%; display: grid; /* new line */ grid-template-rows: auto 1fr 0%; /* new line */ } #uglyWrapper { height: 100%; display: grid; /* new line */ grid-template-rows: auto 1fr 0%; /* new line */ } nav { background-color: hsl(0 0% 50% / 0.5); height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } #title { background-color: lightblue; } <div id="uglyWrapper"> <nav>top nav with unknown height, not fixed</nav> <!-- article --> <div id="title">Full height title image</div> Article continues <br /> much text <br /> much text <br /> <!-- /article --> </div>Le di a ЖнецЪ la recompensa, porque dio la primera respuesta, que cumplía con todos los criterios.
Sin embargo, en la solución final, die grid -approach no funcionó para mí después de agregar <img> en el título. Para algunos tamaños de pantalla, la imagen obligaba a que el título fuera más alto de lo permitido.
Así que volví a la caja flexible y descubrí que mi error original era una height: 100% (no en la pregunta). No dar todos los elementos ancestros de la imagen hasta la height: 100% era el problema.
Este fragmento tiene la estructura HTML deseada sin el ugglyWrapper y una imagen de marcador de posición de pantalla completa.
body { display: flex; flex-direction: column; /* This does not work for wide and slim screen sizes */ /* display: grid; */ /* grid-template-rows: auto 1fr; */ } nav { background-color: gray; } html, body { height: 100%; margin: 0; padding: 0; } #title { height: 100%; background-color: lightblue; } article { height: 100%; } img { width: 100%; height: 100%; object-fit: cover; } <body> <nav>top nav with unknown height, not fixed</nav> <article> <div id="title"> <img src="https://i.stack.imgur.com/nyIkU.png"> </div> Article continues <br> much text <br> much text <br> </article> </body>Aplicar posicionamiento absoluto al <nav> . Dado que la imagen del título usará object-fit: cover , no debería importar si la navegación cubre una parte de la parte superior.
#title { background-color: lightblue; height: 100vh; } html, body { height: 100%; margin: 0; padding: 0; } nav { background-color: grey; position: absolute; top: 0; left: 0; width: 100%; } <body> <nav>top nav with unknown height, not fixed</nav> <article> <div id="title">Full height title image</div> much text <br> much text <br> much text </article> </body>