Porcentaje de altura HTML 5/CSS

StackOverflow https://stackoverflow.com/questions/1622027

  •  06-07-2019
  •  | 
  •  

Pregunta

Estoy intentando establecer un <div> a un cierto porcentaje de altura en CSS, pero sigue siendo del mismo tamaño que el contenido que contiene.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 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;
}
¿Fue útil?

Solución

Estoy intentando establecer un div con un cierto porcentaje de altura en CSS

¿Porcentaje de qué?

Para establecer un porcentaje de altura, su elemento principal (*) 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, te has convertido en un pequeño Catch 22.El navegador se da por vencido y simplemente usa la altura del contenido.

Entonces el padre del div debe tener un explícito height propiedad.Si bien esa altura también puede ser un porcentaje si lo desea, eso simplemente lleva 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, incluido <html> y <body>, Tienes que 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 ancestro más cercano que también se ubicará).

Alternativamente, todos los navegadores modernos e IE>=9 admiten nuevas unidades CSS relativas a la altura de la ventana gráfica (vh) y ancho de la ventana gráfica (vw):

div {
    height:100vh; 
}

Ver aquí para más información.

Otros consejos

Necesitas establecer la altura en el <html> y <body> elementos también;de lo contrario, sólo serán lo suficientemente grandes como para caber en el 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>

La respuesta de

bobince le permitirá saber en qué casos " height: 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: 

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

Puede usar 100vw / 100vh. CSS3 nos da unidades relativas a la ventana gráfica. 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>

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 principales ajusten automáticamente su altura Luego, en su div principal, reste los tamaños de píxel 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.

  

¡Hola!   Para utilizar el porcentaje (%), debe definir el% del elemento primario. Si usa body {height: 100%} no funcionará porque los padres no tienen un porcentaje de altura. En ese caso, para trabajar esa altura del cuerpo debe agregar esto en html{height:100%}

En otro caso, para deshacerse de ese porcentaje primario definitorio que puede usar

body{height:100vh}

vh significa altura de ventana

Creo que ayuda

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top