pantalla - Porcentaje Altura HTML 5/CSS
html title attribute (4)
Estoy tratando de establecer un div a un cierto porcentaje de altura en CSS
Porcentaje de qué?
Para establecer un alto de porcentaje, su elemento principal (*) debe tener una altura explícita. Esto es bastante evidente, en el sentido de que si deja 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 se ha hecho a sí mismo Little Catch 22. El navegador se da por vencido y solo usa la altura del contenido.
Entonces, el padre del div debe tener una propiedad de height explícita. Si bien esa altura también puede ser un porcentaje si lo desea, eso solo lleva el problema al siguiente nivel.
Si desea hacer que la altura div sea un porcentaje de la altura de la ventana gráfica, todos los antepasados de div, incluidos <html> y <body> , deben tener height: 100% , por lo que hay una cadena de altitudes de porcentaje explícitas hasta la div.
(*: o, si el div está posicionado, el ''bloque contenedor'', que es el ancestro más cercano que también se posicionará).
Alternativamente, todos los navegadores modernos e IE> = 9 admiten nuevas unidades de CSS en relación con la altura de la ventana vh ( vh ) y el ancho de la ventana gráfica ( vw ):
div {
height:100vh;
}
Mira aquí para más información .
Estoy tratando de establecer un <div> a un cierto alto de porcentaje en CSS, pero sigue siendo del mismo tamaño que el contenido dentro de él. Sin embargo, cuando <!DOCTYTPE html> el HTML 5 <!DOCTYTPE html> , funciona, el <div> <!DOCTYTPE html> toda la página como lo desea. Quiero que la página valide, entonces, ¿qué debo hacer?
Tengo este CSS en el <div> , que tiene un ID de page :
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
La respuesta de bobince le permitirá saber en qué casos "height: XX%;" funcionará o no funcionará
Si desea crear un elemento con una proporción establecida (altura:% de su propio ancho), la mejor manera de hacerlo es estableciendo efectivamente la altura utilizando el padding-bottom . Ejemplo para 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 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
Puedes usar 100vw / 100vh . CSS3 nos da unidades relativas a ventanas. 100vw significa el 100% del ancho de la ventana gráfica. 100vh; 100% de la altura
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>
También debe establecer la altura en los elementos <html> y <body> ; de lo contrario, solo serán lo suficientemente grandes para ajustarse al 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>