Porcentaje Altura HTML 5/CSS

115

Estoy tratando de establecer un <div> a un alto porcentaje de altura en CSS, pero sigue siendo del mismo tamaño que el contenido dentro de él. Sin embargo, cuando elimino el HTML 5 <!DOCTYTPE html>, funciona, el <div> ocupando toda la página como desee. Quiero que la página valide, entonces, ¿qué debo hacer?Porcentaje Altura HTML 5/CSS

tengo unas pocas cosas en la CSS <div>, que tiene un diámetro interior de page:

#page { 
    padding: 10px; 
    background-color: white; 
    height: 90% !important; 
}

Fuente

2009-10-25 D. Strout

Aquí hay una explicación simple y clara de la CSS 'propiedad altura característica con valores porcentuales: http://stackoverflow.com/a/31728799/3597276 –

aborda la cuestión DOCTYPE: http://stackoverflow.com/ a/32215263/3597276 –

295

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

Porcentaje de qué?

Para establecer un alto de porcentaje, su elemento principal (*) debe tener una altura explícita. Esto es bastante evidente, ya 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 un Little Catch 22. El navegador se da por vencido y solo usa la altura del contenido.

Por lo tanto, el elemento primario del div debe tener una propiedad 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 usted desea hacer la altura div un porcentaje de la altura de la ventana gráfica, cada antepasado del div, incluyendo <html> y <body>, tiene que tener height: 100%, por lo que no es una cadena de alturas porcentuales explícitas a la div.

(*: o, si el div se coloca, el 'bloque de contención', que es el antepasado más cercano a también se utilizará.)

Alternativamente, todos los navegadores modernos y IE> = 9 apoyo unidades de nueva CSS relación con la altura de visualización (vh) y el ancho de la ventana gráfica (vw):

div { 
    height:100vh; 
}

ver aquí para more info.

Fuente

2009-10-25 21:17:03 bobince

Aunque no funciona para la orientación de la pantalla de retrato http://stackoverflow.com/questions/23198237/percentage-of-height-not-working-for-portrait-screen-orientation – Dchris

Consulte la respuesta de Brian Campbell a continuación, creo que es la solución correcta Esta respuesta parece ser una solución alternativa y no aborda el problema real. –

Es necesario ajustar la altura de los elementos y <body><html> así; de lo contrario, solo serán lo suficientemente grandes para ajustarse al contenido. For example:

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

Fuente

2009-10-25 21:15:03

¬_¬ Me tomó 20 minutos darme cuenta de que tenía que establecer el alto del documento al 100% también. Leo esto demasiado tarde, pero es muy brillante, aún así. * suspiro * – omninonsense

Esto debería votarse como respuesta, ya que da una solución a muchas personas que vienen aquí preguntándose qué se puede hacer más, ver la primera respuesta y pensar que no es posible y deambular pensando si existe algún otro método sin leer esto. –

Acepto que esta es la respuesta correcta, la altura no funciona porque el elemento principal que es body y html debe establecerse. Esta respuesta debería ser la respuesta aceptada. –

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 (alto:% de su propio ancho), la mejor manera de hacerlo es estableciendo efectivamente la altura usando padding-bottom. Ejemplo para el 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

Fuente

2013-06-17 22:46:05

¡gracias increíbles! – zaw

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

Fuente

2016-10-26 06:58:16

Respuesta

Cuestiones relacionadas