Altura Porcentual HTML 5 / CSS

Estoy tratando de establecer un <div> a una cierta altura porcentual en CSS, pero sigue siendo el mismo tamaño que el contenido dentro de él. Cuando elimino el HTML 5 <!DOCTYTPE html> sin embargo, funciona, el <div> ocupando toda la página como se desee. Quiero que la página valide, así que ¿qué debo hacer?

Tengo este CSS en el <div>, que tiene un ID de page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
Author: D. Strout, 2009-10-25
Source

4 answers

Estoy tratando de establecer un div a una cierta altura porcentual en CSS

Porcentaje de qué?

Para establecer una altura porcentual, 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 de porcentaje del padre que has hecho un poco de captura 22. El navegador se da por vencido y solo usa el contenido altura.

Así que el padre del div debe tener una propiedad explícita height. Si bien esa altura también puede ser un porcentaje si lo desea, eso solo mueve el problema al siguiente nivel.

Si desea hacer que la altura del div sea un porcentaje de la altura de la ventana, cada ancestro del div, incluidos <html> y <body>, debe 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 el antepasado más cercano también se posicionará.)

Alternativamente, todos los navegadores modernos e IE> = 9 admiten nuevas unidades CSS en relación con la altura de la ventana (vh) y el ancho de la ventana (vw):

div {
    height:100vh; 
}

Vea aquí para más información.

 320
Author: bobince,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 10:31:38

También debe establecer la altura en los elementos <html> y <body>; de lo contrario, solo serán lo suficientemente grandes como 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>
 64
Author: Brian Campbell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-18 05:54:13

La respuesta de Bobince le permitirá saber en qué casos "altura: XX%;" funcionará o no.

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 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 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

 14
Author: Olex Ponomarenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-17 22:46:05

Puede usar 100vw / 100vh. CSS3 nos da unidades relativas a viewport. 100vw significa el 100% del ancho de la ventana. 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>
 4
Author: Ahmad Aghazadeh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-26 06:58:16