Estoy tratando de establecer un <div>
a un determinado porcentaje de altura en CSS, pero sólo permanece el mismo tamaño que el contenido dentro de él. Sin embargo, cuando quito el HTML 5 <!DOCTYTPE html>
funciona, el <div>
ocupa toda la página como se desea. Quiero que la página se valide, ¿qué debo hacer?
Tengo este CSS en el <div>
, que tiene un ID de page
:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
Estoy tratando de establecer un div a un determinado porcentaje de altura en CSS
¿Porcentaje de qué?
Para establecer un porcentaje de altura, su elemento padre(*) 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 propio contenido tiene una altura expresada en términos de porcentaje del padre, te habrás metido en un pequeño lío. El navegador se da por vencido y sólo utiliza la altura del contenido.
Así que el padre del div debe tener una propiedad explícita height
. Aunque esa altura también puede ser un porcentaje si lo deseas, eso sólo traslada el problema al siguiente nivel.
Si quieres que la altura del div sea un porcentaje de la altura de la ventana gráfica, todos los ancestros del div, incluyendo <html>
y <body>
, tienen que tener height: 100%
, así que hay una cadena de alturas porcentuales explícitas hasta el div.
(*: o, si el div está posicionado, el bloque contenedor
, que es el antecesor más cercano que también está posicionado).
Alternativamente, todos los navegadores modernos e IE>=9 soportan 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;
}
Consulte aquí para obtener más información.
Es necesario establecer la altura en los elementos <html>
y <body>
; de lo contrario, sólo serán lo suficientemente grandes para que quepa el contenido. [Por ejemplo][1]:
begin snippet: js hide: false console: false babel: false -->
<!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 "la altura: XX%;" funcionará o no'.
Si desea crear un elemento con una proporción establecida (altura: % de su propia anchura), la mejor manera de hacerlo es estableciendo efectivamente la altura utilizando padding-bottom
. Ejemplo para un 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 sólo estará hecho de padding, y el contenido se expandirá para llenar el contenedor. Artículo largo de 2009 sobre este tema: http://alistapart.com/article/creating-intrinsic-ratios-for-video