Estoy tratando de establecer un <div>cierto porcentaje de altura en CSS, pero sigue siendo del mismo tamaño que el contenido que contiene. <!DOCTYTPE html>Sin embargo, cuando elimino el HTML 5 , funciona, <div>ocupando toda la página como lo desee. Quiero que la página se valide, ¿qué debo hacer?
Tengo este CSS en el <div>, que tiene una ID de page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
heightpropiedad CSS con valores porcentuales: stackoverflow.com/a/31728799/3597276Respuestas:
¿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 contenido en sí tiene una altura expresada en términos del porcentaje del padre que 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 solo mueve 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 tenerheight: 100%, por lo que hay una cadena de alturas de porcentaje explícitas hasta el div.(*: o, si el div está posicionado, el 'bloque que contiene', que es el antepasado más cercano que también se posicionará).
Alternativamente, todos los navegadores modernos y IE> = 9 admiten nuevas unidades CSS en relación con la altura de la ventana gráfica (
vh) y el ancho de la ventana gráfica (vw):Ver aquí para más información .
fuente
Es necesario ajustar la altura de las
<html>y los<body>elementos, así; de lo contrario, solo serán lo suficientemente grandes como para ajustarse al contenido. Por ejemplo :fuente
La respuesta de bobince le permitirá saber en qué casos "altura: XX%"; funcionará o no funcionará.
Si desea crear un elemento con una relación establecida (altura:% de su propio ancho), la mejor manera de hacerlo es estableciendo efectivamente la altura usando
padding-bottom. Ejemplo para cuadrado:El contenedor cuadrado solo estará hecho de relleno, 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
fuente
Puedes usar
100vw / 100vh. CSS3 nos da unidades relativas a la vista. 100vw significa el 100% del ancho de la ventana gráfica. 100vh; 100% de la altura.fuente
En otro caso, para deshacerse de ese porcentaje primario definitorio, puede usar
cuerpo {altura: 100vh}
vh significa altura de ventana gráfica
Creo que ayuda
fuente
A veces, es posible que desee establecer condicionalmente la altura de un div, como cuando todo el contenido es menor que la altura de la pantalla. Establecer todos los elementos principales al 100% cortará el contenido cuando sea más largo que el tamaño de la pantalla.
Entonces, la forma de evitar esto es establecer la altura mínima:
Continúe permitiendo que los elementos primarios ajusten automáticamente su altura. Luego, en su div principal, reste los tamaños de píxeles del div de encabezado y pie de página de 100vh (unidades de ventana gráfica). En CSS, algo así como:
altura mínima: calc (100vh - 246px);
100vh es la longitud total de la pantalla, menos los divs circundantes. Al establecer la altura mínima y no la altura, el contenido más largo que la pantalla continuará fluyendo, en lugar de cortarse.
fuente