Porcentaje Altura HTML 5 / CSS

176

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

html css height

— D. Strout
fuente

3

Aquí hay una explicación simple y clara de la heightpropiedad CSS con valores porcentuales: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

aborda el problema DOCTYPE: stackoverflow.com/a/32215263/3597276

— Michael Benjamin

371

Estoy tratando de establecer un div a un cierto porcentaje de altura en CSS

¿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 tener height: 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):

div {
    height:100vh; 
}

Ver aquí para más información .

— bobince
fuente

Aunque no funciona para la orientación de la pantalla vertical stackoverflow.com/questions/23198237/…

— Dchris

1

Vea la respuesta de Brian Campbell a continuación. Creo que esa es la solución correcta. Esta respuesta parece ser una solución alternativa y no aborda el problema real.

— Desarrollador MG

69

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 :

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

Expandir fragmento

— Brian Campbell
fuente

66

¬_¬ Me tomó 20 minutos darme cuenta de que también tenía que establecer la altura del documento al 100%. Leí esto demasiado tarde, pero aún así es muy brillante. suspiro

— omninonsense

Esto debería votarse como respuesta, ya que brinda una solución para muchas personas que vienen aquí preguntándose qué se puede hacer la mayoría de las personas, miran la primera respuesta y piensan que no es posible y se desvían pensando si existe algún otro método sin leer esto

— codefreaK

Estoy de acuerdo en que esta es la respuesta correcta, la altura no funciona porque el elemento principal que es body y html debe establecerse. Esta respuesta debe ser la respuesta aceptada.

— MG Developer

Esta no es una respuesta correcta: si el contenido es más grande que el que se ajusta a la altura de la pantalla, el resto del contenido ya no es visible, por lo tanto, la altura NO se ha configurado al 100% de la ventana del navegador, sino nuevamente al 100% de contenido. Tal vez eso no sea lógico, pero eso es lo que sucede en los dos navegadores principales, Firefox y Chrome, solo pruébelo. Por lo tanto, la respuesta aceptada es la única correcta.

— nepdev

15

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:

<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

— Olex Ponomarenko
fuente

Esto funciona muy bien. También se siente rápido en el navegador al cambiar el tamaño de una página que contiene más de 100 elementos. ¡Gracias!

— decano grande

5

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.

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

— Ahmad Aghazadeh
fuente

4

¡Hola! Para utilizar el porcentaje (%), debe definir el% del elemento primario. Si usa body {height: 100%} no funcionará porque su padre no tiene 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, puede usar

cuerpo {altura: 100vh}

vh significa altura de ventana gráfica

Creo que ayuda

— Md. A. Barik
fuente

2

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.

— Jahmic
fuente