Foros del Web » Creando para Internet » CSS »

DIV que sea 100%

Estas en el tema de DIV que sea 100% en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/06/2010, 11:05
 
Fecha de Ingreso: junio-2010
Mensajes: 3
Antigüedad: 7 años, 5 meses
Puntos: 0
DIV que sea 100%

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
  #2 (permalink)  
Antiguo 15/06/2010, 11:17
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: DIV que sea 100%

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
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 15/06/2010, 13:20
 
Fecha de Ingreso: mayo-2010
Mensajes: 84
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: DIV que sea 100%

si le dás un tamaño concreto al body, el div se irá hasta ese tamaño
__________________
http://www.pcexpansion.es
  #4 (permalink)  
Antiguo 15/06/2010, 19:49
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: DIV que sea 100%

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
  #5 (permalink)  
Antiguo 16/06/2010, 09:55
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: DIV que sea 100%

Cita:
Iniciado por deirdre Ver Mensaje
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.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #6 (permalink)  
Antiguo 16/06/2010, 10:24
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: DIV que sea 100%

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
  #7 (permalink)  
Antiguo 16/06/2010, 10:51
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: DIV que sea 100%

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
  #8 (permalink)  
Antiguo 16/06/2010, 11:08
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: DIV que sea 100%

Ahh ve vos, todos los dias se aprende algo nuevo .

Gracias deirdre
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #9 (permalink)  
Antiguo 16/06/2010, 11:19
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: DIV que sea 100%

Hola gVenom

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

De nada.

Bye
  #10 (permalink)  
Antiguo 17/06/2010, 11:49
 
Fecha de Ingreso: junio-2010
Mensajes: 3
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: DIV que sea 100%

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

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:20.