130 votos

Porcentaje 5 de altura HTML/CSS

Estoy tratando de establecer una <div> a un determinado porcentaje altura en CSS, pero sólo permanece el mismo tamaño que el contenido en su interior. Cuando me quito el HTML 5 <!DOCTYTPE html> sin embargo, funciona, el <div> ocupando toda la página como se desee. Quiero la pagina para validar, así que ¿qué debo hacer?

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

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

323voto

bobince Puntos 270740

Estoy tratando de crear un div para un cierto porcentaje de la altura en CSS

Porcentaje de qué?

Para establecer un porcentaje de la altura, su elemento padre(*) debe tener un explícito de altura. Esto es bastante evidente, en que si se deja de altura como auto, el bloque tendrá la altura de su contenido... pero si el contenido en sí mismo tiene una altura expresada en términos de porcentaje de los que el padre ha hecho de sí mismo un poco de trampa 22. El navegador se da por vencido y sólo utiliza el contenido de la altura.

Así que el padre de la div debe tener una explícita height de la propiedad. Mientras que la altura también puede ser un porcentaje, si usted quiere, que sólo traslada el problema al siguiente nivel.

Si desea hacer que el div de la altura de un porcentaje de la ventanilla de altura, cada ancestro de los div, incluyendo <html> y <body>, tienen la height: 100%, por lo que hay una cadena de explícito porcentaje alturas de abajo a la div.

(*: o, si el div se coloca, el 'bloque que contiene', que es el ancestro más cercano a colocarse.)

Alternativamente, todos los navegadores modernos y IE>=9 nuevo soporte de CSS unidades en relación a la ventanilla de altura (vh) y ancho de ventana (vw):

div {
    height:100vh; 
}

Ver aquí para más info.

64voto

Brian Campbell Puntos 101107

Usted necesita para establecer la altura de la <html> y <body> elementos así; de lo contrario, sólo será lo suficientemente grande como para que quepa el contenido. Por ejemplo:

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

14voto

Olex Ponomarenko Puntos 217

bobince la respuesta que te permitirá saber en qué casos "altura: XX%;" va a hacer o no el trabajo.

Si desea crear un elemento con un conjunto ratio (altura: % de la que es propia de ancho), la mejor manera de hacerlo es mediante la configuración de la altura mediante padding-bottom. Ejemplo para la plaza:

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

La plaza del contenedor deberá ser hechos de relleno, y el contenido se expande para llenar el recipiente. Largo artículo de 2009, sobre este tema: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X