> Faqs > CSS height: 100% - Alto de capa que sea el de la ventana del navegador

CSS height: 100% - Alto de capa que sea el de la ventana del navegador

Estoy intentando hacer una capa que ocupe de alto máximo de la ventana del navegador. No se si me explico… lo que quiero es que el espacio de la capa ocupe desde la parte de arriba hasta la parte de debajo del navegador.

He probado con height:100%, que se supone que debería funcionar, pero no consigo que la capa llegue hasta abajo. Le he dado color de fondo para ver si llega, pero se termina donde terminan los contenidos. Igual que width:100% ocupa todo el ancho ¿no debería con height:100% ocupar todo el alto?

Hay alguna manera de conseguir esto?
O algún truco para que el espacio ocupado de la capa sea el alto completo de la ventana?

Editar
Responder la pregunta

Respuestas

Hola!! utiliza vh.

1vh = 1% de la altura del viewport

100vh = altura del viewport

Te quedaría

height:100vh;

Angélica
5 1
Muchas gracias, me fue de gran ayuda!

El Problema del CSS height 100% ya lo he tratado otras veces. Efectivamente, hay un truquillo para conseguir que un contenedor ocupe el tamaño completo del área disponible del navegador a lo alto.

En realidad lo estás haciendo bien, osea, estás colocando el atributo height:100%, que es el que te va a servir para esto, pero también tienes que ponerlos como atribuitos al body y la etiqueta html.

Supongo que tendrás algo como esto:

<div id="contenedor" style="width:100%; height:100%;">  
 Contenido que tiene que ocupar todo el espacio del navegador.  
</div>

Pues además tendrías que meter esto otro, para que tanto el body como el html tengan el height=100%: (además de cada contenedor que haya hasta llegar a la capa que quieres que ocupe todo el alto)

<style type="text/css">  
 html, body {  
   margin:0px;  
   height:100%;  
 }  
</style>

Un ejemplo completo, maquetado con CSS, para que funcione el height: 100%:

 <html>  
 <head>  
 <title>maquetado CSS utilizando todo el height</title>  
   
 <style type="text/css">  
 html, body {  
   margin:0px;  
   height:100%;  
 }  
 </style>  
   
 </head>  
   
 <body>  
 <div id="contenedor" style="width:100%; height:100%;">  
 <div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;">  
 <div id="contenidolateral" style="padding: 30px 10px 0 10px;">  
 Por <a href="http://www.guiarte.com">guiarte.com</a>  
 <br />  
 <br />  
 Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy fácil maquetar con contendor de todo el alto..  
 </div>  
 </div>  
 <div id="map" style="height: 100%; margin-right:210px; background-color:#ffff99;">  
 Contenido que tiene que ocupar todo el espacio del navegador.  
 </div>  
 </div>  
   
 </body>  
 </html>  
</span>

</body></html>
Miguel Angel
3043 137 204 16

Para poder hacer que funcione el height: 100% lo que tienes que hacer es que todos los elementos tengan ese mismo estilo, desde el padre a los hijos.

Es decir, si no tienes un <html> con height 100% tu <body> no podrá crecer al 100%. Si tu <body> no tiene un height al 100% el contenedor principal, aunque le pongas height 100% no te va a hacer caso.

Así, lo único que tienes que preocuparte es que todos los elementos que vas usando ocupen toda la altura disponible.

Borja
307 6 24 16
Aportar una respuesta