A menudo necesito que los elementos html y body tengan el tamaño de la pantalla. Por lo general, en el caso en que quiero que un elemento svg se ajuste a toda la pantalla.
Para lograr eso, vi que era posible usar el código CSS de la siguiente manera.
html,body{margin:0;padding:0;height:100%;}El código que yo personalmente uso es el siguiente.
html { height: 100%; display: flex; } body { flex-grow: 1; display: flex; flex-direction: column; }Ambos parecen funcionar bien, pero recientemente tuve el siguiente comentario.
html { height: 100%; display: flex; }es una declaración inútil. la altura html siempre se calculará para ajustarse al contenido. También100%significa 100% del padre.htmlno tiene padre ... también aplicar flexbox ahtmles inútil ya que solo tiene 1 elemento secundario que es visible:body.
Realmente:
100% de la altura de html para que se ajuste a la altura de la pantalla.html para poder usar flex-glow: 1 en su hijo, y hacer que este hijo llene su padre.¿Hay alguna solución mejor que la mía?
Yo personalmente uso esto:
html { display: grid; min-height: 100%; }Esto hará que su cuerpo tenga la altura completa de forma predeterminada y también respetará el margen predeterminado
html { display: grid; min-height: 100%; background: blue; } body { background: red; } Y puede usar fácilmente height:100% en un elemento interno sin problemas:
html { display: grid; min-height: 100%; background: blue; } body { background: red; } .box { height: 100%; border: 5px solid green; box-sizing: border-box; } <div class="box"></div>Encuentro que cada vez que trabajo con elementos que deben tener la altura total de la altura de la pantalla height: 100vh suele ser un buen lugar para comenzar. VH = altura de la ventana. Lo uso sobre la altura: 100% ya que, según el diseño, el 100% no siempre es igual a la altura de la página, ¡así que con VH sabes exactamente lo que obtienes!
Con VH también puede usar un calc() en su CSS, por lo que si necesita que su cuerpo llene toda la altura de la página, pero reste la altura de un encabezado, por ejemplo, podría hacer algo como esto:
<header style="height: 64px"> <section style="height: calc(100vh - 64px)"