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

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

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:

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

</div> </span> 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)

<span class="codigo"> <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 Alvarez
Aportar una respuesta