css - otro - div pantalla completa
CSS: ¿por qué no funciona el porcentaje de altura? (6)
Esta pregunta ya tiene una respuesta aquí:
- Porcentaje Altura HTML 5 / CSS 5 respuestas
¿Por qué un valor de porcentaje para la height no funciona, pero un valor de porcentaje para el width no funciona?
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}
El ancho de #working termina siendo el 80% de la ventana #working , pero la altura de #not-working termina siendo 0.
Creo que solo necesita darle un contenedor primario ... incluso si la altura de ese contenedor se define en porcentaje. Esta costuras para trabajar bien: JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
La altura de un elemento de bloque es predeterminada a la altura del contenido del bloque. Entonces, dado algo como esto:
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner crecerá para ser lo suficientemente alto como para contener el párrafo y #outer crecerá para ser lo suficientemente alto como para contener #inner .
Cuando especifica la altura o el ancho como un porcentaje, es un porcentaje con respecto al elemento primario. En el caso del ancho, todos los elementos de bloque son, a menos que se especifique lo contrario, tan anchos como sus elementos primarios hasta el final a <html> ; por lo tanto, el ancho de un elemento de bloque es independiente de su contenido y dicho width: 50% produce un número bien definido de píxeles.
Sin embargo, la altura de un elemento de bloque depende de su contenido a menos que especifique una altura específica. Por lo tanto, hay retroalimentación entre el padre y el niño en lo que respecta a la altura y dice height: 50% no produce un valor bien definido a menos que interrumpa el ciclo de retroalimentación al darle al elemento principal una altura específica.
Necesitas darle un contenedor con una altura. ancho utiliza la vista como el ancho predeterminado
Otra opción es agregar estilo a div.
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
//to be scrolled
</div>
Y significa que un elemento está posicionado en relación con el antepasado posicionado más cercano.
Sin contenido, la altura no tiene valor para calcular el porcentaje de. Sin embargo, el ancho tomará el porcentaje del DOM, si no se especifica ningún padre. (Usando su ejemplo) Colocando el segundo div dentro del primer div, habría dado un resultado ... ejemplo abajo ...
<div id="working">
<div id="not-working"></div>
</div>
El segundo div sería el 30% de la altura del primer div.
Un valor de porcentaje en una propiedad de height tiene una pequeña complicación, y las propiedades de width y height en realidad se comportan de manera diferente entre sí. Déjame llevarte en un recorrido a través de las especificaciones.
propiedad de height :
Echemos un vistazo a lo que dice la especificación CSS Snapshot 2010 acerca de la height :
El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada. Si la altura del bloque que contiene no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está posicionado de manera absoluta, el valor se calcula como "automático". Una altura porcentual en el elemento raíz es relativa al bloque inicial que contiene . Nota: Para los elementos posicionados absolutamente cuyo bloque de contención se basa en un elemento de nivel de bloque, el porcentaje se calcula con respecto a la altura de la caja de relleno de ese elemento.
OK, vamos a separar eso paso a paso:
El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada.
¿Qué es un bloque que contiene ? Es un poco complicado, pero para un elemento normal en la posición static predeterminada, es:
la caja del antepasado del contenedor de bloque más cercano
o en inglés, su caja padre. (Vale la pena saber también lo que sería para posiciones fixed y absolute , pero lo ignoro para que esta respuesta sea breve).
Así que tomemos estos dos ejemplos:
<div id="a" style="width: 100px; height: 200px; background-color: orange">
<div id="aa" style="width: 100px; height: 50%; background-color: blue"></div>
</div>
<div id="b" style="width: 100px; background-color: orange">
<div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>
En este ejemplo, el bloque que contiene #aa es #a , y así sucesivamente para #b y #bb . Hasta ahora tan bueno.
La siguiente oración de la especificación para la height es la complicación que mencioné en la introducción de esta respuesta:
Si la altura del bloque que contiene no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está posicionado de manera absoluta, el valor se calcula como "automático" .
Jajaja ¡Si la altura del bloque contenedor se ha especificado explícitamente importa!
- 50% de la
height:200pxes 100height:200pxen el caso de#aa - Pero el 50% de la
height:autoesauto, que es 0px en el caso de#bbya que no hay contenido para queautoexpanda a
Como dice la especificación, también importa si el bloque que contiene ha sido posicionado de manera absoluta o no, pero avancemos al width .
propiedad de width :
Entonces, ¿funciona igual para el width ? Echemos un vistazo a la especificación :
El porcentaje se calcula con respecto al ancho del bloque que contiene la caja generada.
Eche un vistazo a estos ejemplos familiares, modificados de los anteriores para variar el width lugar de la height :
<div id="c" style="width: 200px; height: 100px; background-color: orange">
<div id="cc" style="width: 50%; height: 100px; background-color: blue"></div>
</div>
<div id="d" style=" height: 100px; background-color: orange">
<div id="dd" style="width: 50%; height: 100px; background-color: blue"></div>
</div>
- 50% de
width:200pxes 100px en el caso de#cc - 50% de
width:autoes 50% de cualquierwidth:autotermina siendo, a diferencia de laheight, no hay una regla especial que trate este caso de manera diferente.
Ahora, aquí está el truco: ¡ auto significa diferentes cosas, dependiendo en parte de si se ha especificado para width o height ! Para la height , solo significaba la altura necesaria para adaptarse a los contenidos *, pero para el width , el modo auto es más complicado. Puede ver en el fragmento de código que en este caso terminó siendo el ancho de la ventana gráfica.
¿Qué dice la especificación sobre el valor automático para el ancho ?
El ancho depende de los valores de otras propiedades. Vea las secciones a continuación.
Wahey, eso no es útil. Para ahorrarle el problema, le encontré la sección correspondiente a nuestro caso de uso, titulada "cálculo de anchos y márgenes", subtítulos "a nivel de bloque, elementos no reemplazados en flujo normal" :
Las siguientes restricciones deben mantenerse entre los valores utilizados de las otras propiedades:
''margin-left'' + ''border-left-width'' + ''padding-left'' + ''width'' + ''padding-right'' + ''border-right-width'' + ''margin-right'' = ancho del bloque contenedor
OK, así que el width más el margen relevante, el borde y los bordes de relleno deben sumarse al ancho del bloque contenedor ( no de forma descendente, como funciona la height ). Solo una frase más:
Si ''ancho'' se establece en ''automático'', cualquier otro valor ''automático'' se convierte en ''0'' y el ''ancho'' se deriva de la igualdad resultante.
Jajaja Entonces, en este caso, el 50% del width:auto es el 50% de la ventana gráfica. ¡Ojalá todo tenga sentido ahora!
Notas al pie
* Al menos, en la medida en que importa en este caso. spec De acuerdo, todo solo tiene sentido ahora.