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

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

Pertenece a la categoría:
Pregunta
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?
Respuesta de Miguel Angel Alvarez
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>


Volver al árbol de categoríasVolver al árbol de categorías

Comentarios

Sara

12/1/2008
Hola, después de dos semanas y pico peleandome con los altos de las capas en css aun no he conseguido nada. He probado el código que pusiste y el caso es que en IE va superbien,pero sigue sin funcionar en Mozilla. Una vez vas metiendo contenido en las columnas éstas deberían agrandarse, pero no funciona bien en Mozilla, manteniendo el 100% inicial del body. ¿Sabrías cómo hacer para que éstas se adaptaran al contenido, y que a la vez tuviera un alto inicial de 100% aunque el contenido fuera cero??

Muchas gracias por adelantado, un saludo

Phoncadiz

30/9/2009
¿Y si tienes scroll?
Muy bien, muy bonito. Pero... ¿y si la página tiene scroll? No funciona.

Miguel Flores

29/3/2010
position absolute
Prueba con ponerle un

position: absolute;

al DIV contenedor

Diego

06/5/2010
Height 100%
Muchas Gracias!!!

Funciono perfecto!!!!!

Desesperado estaba

10/6/2010
Funciona de maravilla
Muchas gracias, me va de maravilla. Estuve buscando la solución y no había forma de encontrarla. El problema estaba en que no asignaba el 100% del alto en la etiqueta html.

Paty

22/8/2010
Fantástico
Me pareció fantástica la respuesta, llevaba mucho tiempo sin poder encontrar la solución, muchas, muchas gracias.

raquel

24/8/2010
gracias,
gracias eres un crack

ST

18/1/2011
Fallo
Hola, el ejemplo funciona si es que esta asi como lo han presentado, sin contenidos, sin embargo, basta con añadir el texto suficiente y notaras que solo tomo la parte que se ve al principio en el navegador y no el resto.

Felipe

29/1/2011
Problema en IExplorer
hola, la solucion funciona perfectamente con Chrome y Mozilla, pero con IExplorer no funciona el 100% del alto.

Pablo

20/5/2011
Espectacular.
Muchas gracias. Funciona de maravilla.

di1307

30/5/2011
Funciona!!!
Muchas gracias esto me funcionó a la perfección :)

tomer

25/7/2011
gracias
Muchas gracias justo lo que necesitaba y muy simple

hugo

24/8/2011
Excelente solucion!
Funciona perfecto!
"Position:Abolsute; Height:100%" al DIV que deseas que se estire y listo!

DonDuke

22/11/2011
Excelente
Muy buen aporte amigo!!! gracias.

chico intelijente

03/4/2012
una web estraña
<a href="http://www.todotegusta.com/2010/03/pepsiman-pc-portable-1-link" title="pepsiman">
<img src="http://watchaplayin.files.wordpress.com/2012/02/cm_pepsiman.jpg" width="200" height="200" alt="BenKo?s Art" />
</a>

Guille

21/10/2012
Lo del scroll
Ho,la a todos. Revisando lo que dicen por ahí arriba de si la página tiene un scroll... ¿alguna solución? En mi caso tengo un header, debajo de él dos capas flotando una a la derecha de la otra (un aside y una id="cuerpo") y más abajo un footer. Las que me dan problemas son las de aside y cuerpo, en cuento una es más "alta" que la otra, en la otra capa se queda sin rellenar el color de fondo de todo el div, sólo se rellena allí donde hay algo. No puedo fija la altura del div porque será variable dependiendo del contenido que añada, ¿que puedo hacer?

erick

26/10/2012
Alto de capa de la ventana del navegador
amigo la ayuda esta baka, pero quiesiera saber como agregarle un emcabezado, porque cuando lo hago el tamaño del encabezado se suma al tamaño del div.. por facor agradeceria una respuesta

Javier

29/12/2012
Soluciona el problema pero crea otro
Saludos. En mi caso, la mencionada solución de poner todas las capas contenedoras en height: 100%; me funcionó, con lo que me llevé una alegría inmensa. Pero al revisar la web, veo que el height: 100% agranda las capas, pero deja estas en un tamaño fijo. Es decir cuando el texto no cabe en la capa, este se desborda, ya que las capas ya no son autoajustables como antes, creciendo a medida que crece su contenido. Puedo hacer algo al respecto con la propiedad "overflow", pero poco mas que una chapuza.
No lo entiendo, porque no puede no haber una solución relativamente fácil a un problema tan común.
Gracias.

Mayinali

11/2/2013
Div al 100
La solución para quienes busquen un contenedor que cubra todo lo alto es usar min-height 100% en vez de solamente height. Con height, en caso de que nuestro contenido sobrepase el 100% del alto de la pantalla, el contenedor no puede crecer más porque le hemos dicho claramente "100 por ciento, ni más ni menos". Usen min-height y dejen a sus divs crecer felices :3

crokis

11/7/2013
Excelente
Gracias por la información, como la mayoría lo buscaba hace mucho tiempo.
Y por fin me funcionó.

Saludos.

Ariel

23/8/2013
Muy util
Excelente, es lo que estaba buscando, solo fijarse bien en los "height" que tienen los div externos al deseado, de lo contrario no funcionara bien.

Saludos

Tonet

29/4/2014
Perfecto!!
Que fácil es ahora......
Muchas Gracias!!!

Edwin

20/2/2015
Muchas Gracias
Hacia rato que estaba buscando solucionar este problema,...con tu ayuda todo quedo de maravilla...muchas gracias

JULIANS

21/5/2015
Alto de capa que sea el de la ventana del navegador
Lo mejor es comenzar a trabajar con los viewport-width y viewport height; desarrollado paraDiseño web adaptable,ademas se le puede aplicar a los textos <br><center><a href="http://ksesocss.blogspot.com/2013/09/uso-unidades-css-vw-vhh-modern-desing-web.html">click para mas información</a></center>

Ignasi

29/5/2015
Gracias
Gracias por que me has solucionado un quebradero de cabeza.

aptc

18/8/2015
Si todavía no funciona: Solucionado
Mi caso: dos cajas laterales y una central agrupadas en una caja contenedor.
La caja central es demasiado alta y las laterales no llegan hasta el final de la hoja.
- A las cajas laterales les pongo las propiedades "margin-bottom" y "padding-bottom", con el mismo valor (bastante elevado) pero de signo contrario, por ejemplo: margin-bottom: -6000px; y padding-bottom: 6000px;
- A la caja footer (incluida en el mismo contenedor), pongo la propiedad "display: inline-block;" y la propiedad width del mismo valor que el contenedor.
- Y para que no se desborde todo hacía abajo, en la caja contenedor : " overflow: hidden; "
Al menos en Firefox funciona.
La idea la he sacado de la web: http://librosweb.es
Espero que les sirva, y gracias a todas las personas que se dedican a colaborar ofreciendo sus conocimientos desinteresadamente, para ver si hacemos que "esto" funcione.

EvrAFM

28/5/2016
Ayuda
Tengo un problema, tengo una tabla que basicamente es el menu de mi sitio web, quiero que esta tabla ocupe el 100% de la pantalla y lo pude hacer,es de 3x3 quiero que las celdas sean cuadros del mismo tamaño c/u, o sea 33.3% de lo que ocupa la tabla, pero al usar
<style type="text/css">
img {
height: 33%;
width: 33%;
}
</style>
<img src="ejemplo"/>

esto reduce la imagen al 33% del tamañ de la imagen, no de la tabla en la que esta contenida.

Erika barragan

03/1/2017
Accidente de carro
Tuve un accidente y lo reporte ala aseguransa y no me lo kieren pagar ya tiene 2 meses mi carro estacionado eh perdido dias de mi trabajo por que no tengo en que irme ah mi trabajo eh llamado barias veses con los de la aseguransa y no an echo nada espero que me puedan ayudar

Antonio

19/9/2017
No me sirvio
Hola, veo que tiene logica el ejemplo pero no me sirvio, lo he probado con el footer y el footer si ha copado todo el espacio, pero lo hago en los div, html y demas y nada... :/

adominguez83

18/10/2017
CSS height: 100% - Alto de capa que sea el de la ventana del navegador
Posible solución para algunos:
height: calc(100% - Xpx). siendo X el tamaño de los divs anteriores, por ejemplo una cabecera.
Saludos!

Daniel

28/1/2018
En verdad sirve
Poner el estilo 100% en height a la etiqueta html funciona, ocupa el 100 por 100 aun asi el view port se halla sobrepasado con un scroll, sirve mucho para los menus laterales.

lucas

13/9/2018
height
Genio Miguel Angel Alvarez, fue de ayuda gracias capo jaj

saulwolf

12/7/2019
css-grid
Encontre una forma con css grid sin importar el contenido posicionar los elementos de forma que siempre estan pegados. al footer o al header
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
min-height: 100%;
box-sizing: border-box;
}
.grid {
display: grid;
min-height: 100%;
height: 100%;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
justify-items: stretch;
align-items: stretch;
grid-gap: 30px;
}

.item {
background-color: aquamarine;
display: grid;
height: 100%;
justify-content: space-between;
align-content: space-between;
justify-items: stretch;
align-items: stretch;
padding: 25px;
}

</style>


<div class="grid">
<div class="item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing</p>
</div>
<div class="item">
<h1>title</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae minus impedit atque temporibus, aperiam numquam
repellendus voluptatem deleniti blanditiis fuga accusamus, praesentium iusto, enim ut magni nulla est maxime?
Cupiditate!</p>
</div>
</div>
FAQ relacionadas
Volver al árbol de categoríasVolver al árbol de categorías