¿Por qué el porcentaje de altura no funciona en HTML/CSS?
Estoy intentando establecer <div>un cierto porcentaje de altura en CSS, pero sigue siendo del mismo tamaño que el contenido que contiene. Sin embargo, cuando lo elimino <!DOCTYTPE html>, funciona; ocupando <div>toda la página como se desee. Quiero que la página se valide, ¿qué debo hacer?
Tengo este CSS en <div>, que tiene un ID de page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
Estoy intentando establecer un div con un cierto porcentaje de altura en CSS
¿Porcentaje de qué?
Para establecer un porcentaje de altura, su elemento principal (*) debe tener una altura explícita. Esto es bastante evidente, ya que si dejas la altura como auto, el bloque tomará la altura de su contenido... pero si el contenido en sí tiene una altura expresada en términos de porcentaje del padre, te has hecho un poco Captura 22. El navegador se da por vencido y solo usa la altura del contenido.
Entonces el padre del div debe tener una heightpropiedad explícita. Si bien esa altura también puede ser un porcentaje si lo desea, eso simplemente lleva el problema al siguiente nivel.
Si desea que la altura del div sea un porcentaje de la altura de la ventana gráfica, todos los antepasados del div, incluidos <html>y <body>, deben tener height: 100%, por lo que hay una cadena de alturas porcentuales explícitas hasta el div.
(*: o, si el div está posicionado, el 'bloque contenedor', que es el ancestro más cercano que también se ubicará).
Alternativamente, todos los navegadores modernos y IE>=9 admiten nuevas unidades CSS relativas a la altura de la ventana gráfica ( vh) y al ancho de la ventana gráfica ( vw):
div {
height:100vh;
}
Vea aqui para mas informacion .
También debe establecer la altura de los elementos <html>y ; <body>de lo contrario, sólo serán lo suficientemente grandes como para caber en el contenido. Por ejemplo :
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
La respuesta de Bobince le permitirá saber en qué casos "altura: XX%;" funcionará o no.
Si desea crear un elemento con una proporción establecida (alto:% de su propio ancho), use la aspect-ratiopropiedad. Asegúrese de que la altura no esté establecida explícitamente en el elemento para que funcione. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square {
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
}
Históricamente, la mejor manera de hacerlo era establecer la altura usando padding-bottom. Ejemplo de cuadrado:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
El contenedor cuadrado estará hecho simplemente de relleno y el contenido se expandirá para llenar el contenedor. Artículo extenso de 2009 sobre este tema: http://alistapart.com/article/creating-intrinsic-ratios-for-video
