DIV que sea 100%

daviduria · #1 (**permalink**) 15/06/2010, 10:05

Hola estoy con una web y tengo un DIV que necesito que sea height:100%; y me ocupe hasta la parte inferior. Pero no se como puedo hacer esto.

#cuerpoblanco{background-color: #ffffff; width:760px; float:left; height:100%;}

pero no me sale, la capa se termina donde termina el texto.

Gracias

gVenom · #2 (**permalink**) 15/06/2010, 10:17

el height 100% lo que hace es estirar el div conforme le ingreses datos dentro. No refleja un tamaño especifico para alguna resolución de pantalla

pcexpansion · #3 (**permalink**) 15/06/2010, 12:20

si le dás un tamaño concreto al body, el div se irá hasta ese tamaño

deirdre · #4 (**permalink**) 15/06/2010, 18:49

Hola gVenom

Me permito corregirte: creo que confundes 'height: 100%' con 'height: auto'. El height: 100% ocupa siempre el total (100%) del elemento que lo contenga (contenedor) y el 'height: auto' es el que se adapta al contenido.

Para que un div tenga una altura del 100% en la ventana del navegador hay que definir esa ventana al 100%, de esta forma:

html, body {height: 100%}

y luego viene el div:

#mi-div {height: 100%}

todo ello con el doctype adecuado.

Saludos

gVenom · #5 (**permalink**) 16/06/2010, 08:55

Cita:

Iniciado por deirdre

Hola gVenom

Me permito corregirte: creo que confundes 'height: 100%' con 'height: auto'. El height: 100% ocupa siempre el total (100%) del elemento que lo contenga (contenedor) y el 'height: auto' es el que se adapta al contenido.

Mmm, bueno, pero eso en el caso de que algo contenga a ese div, pero si el div es el que esta conteniendo todo, creo que si tengo la razon, ya que el div reconocerá un 100% segun lo que tenga dentro de el.

alexk · #6 (**permalink**) 16/06/2010, 09:24

daviduria quiere que ocupe el 100% de alto... y al ser una medida relativa necesita que sus contenedores padre tengan el mismo valor, osea coincido con deirdre

deirdre · #7 (**permalink**) 16/06/2010, 09:51

Hola gVenom

No es necesario que el div tenga contenido, puede estar totalmente vacío y coge las medidas de su contenedor, en este caso la ventana del browser (html + body).

Te dejo una prueba rápida (copy-paste y lo pruebas):

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Caja a toda pantalla</title>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: #fff;
}
#caja {
	width: 100%;
	height: 100%;
	background-color: #f00;
}
</style>
</head>

<body>
<!-- el div llamado caja no tiene contenido ninguno y ocupa la totalidad de la ventana -->

<div id="caja"></div>

</body>

</html>

Saludos

gVenom · #8 (**permalink**) 16/06/2010, 10:08

Ahh ve vos, todos los dias se aprende algo nuevo

.

Gracias deirdre

deirdre · #9 (**permalink**) 16/06/2010, 10:19

Hola gVenom

Sí exacto: "todos los dias se aprende algo nuevo". Esto es lo bueno de este foro...

De nada.

Bye

daviduria · #10 (**permalink**) 17/06/2010, 10:49

1000 gracias a todos, VOy a pobar la información que seguro que funciona.