Color de Fondo de un div

unexes · #1 (**permalink**) 14/10/2012, 05:57

Hola a ver si me podeis decir que hago mal.

Tengo en el archivo.css un Div de fondo (DivFondo) que se centra en la página independientemente de la resolución de pantalla y a este fondo le he puesto un color, el problema es que si a ese div de fondo le pongo una altura por ejemplo: (height:2172px;) tal como esta en el código que pongo a continuación me pone el color que le he puesto en el (background-color:#FCF;) de fondo, hasta aqui todo correcto, pero si a esa altura le pongo (height:auto;) o (height:100%;) o simplemente elimino la altura no me colorea el fondo ¿Por que?.

Como debo hacerlo para que me coloree el fondo y no tenga que ponerle una altura determinada.

Gracias anticipadas a tod@s.

Código CSS:

Ver originalbody {
    margin:0 auto;
}
#Contenedor {
margin: 0 auto;
width:1000px;
}
#DivFondo {
    position:relative;
    width: 1000px;
    height:2172px;
    z-index: 2;
    top: 10px;
    background-color:#FCF;
}

flashmax · #2 (**permalink**) 14/10/2012, 06:53

hola si el div tiene un height:auto sin contenido no va a crecer y por eso no lo ves, podrías darle un min-height: o colocar una imagen de 900px x 1px como fondo del body, ejemplo:

Código HTML:

body {
	background-image: url(fondo.jpg);
	background-repeat: repeat-y;
	background-position:center;
}

emprear · #3 (**permalink**) 14/10/2012, 06:53

Dándole algún contenido al div

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
body {
    margin:0 auto;
}
#Contenedor {
margin: 0 auto;
width:1000px;
}
#DivFondo {
    position:relative;
    width: 1000px;
    z-index: 2;
    top: 10px;
    background-color:#FCF;
}
 
 
/*]]>*/
</style>
</head>
<body>
<div id="contenedor">
 
<div id="DivFondo">
    fondo
</div>
</div>
</body>
</html>

si vas a usar porcentajes, tenes que definir la altura de los elementos contenedores

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
html, body {
    margin:0 auto;
    height: 100%;
}
#Contenedor {
margin: 0 auto;
width:1000px;
height: 100%;
}
#DivFondo {
    position:relative;
    width: 1000px;
    z-index: 2;
    top: 10px;
    background-color:#FCF;
    height: 100%;
}
 
 
/*]]>*/
</style>
</head>
<body>
<div id="Contenedor">
<div id="DivFondo">
    fondo
</div>
</div>
</body>
</html>

Aclaración:
z-index solo funcionará en capas con posición absolute o fixed

Saludos

unexes · #4 (**permalink**) 14/10/2012, 14:13

Muchas gracias flashmax y emprear.

Vereis como no tengo muchos conocimientos a veces me surjen cosas como esta aunque todos los días intento hacer cosas nuevas y aprender sus principios.

No se si se considera contenido el hecho de que dentro del divFondo hay otros Divs esos si tienen contenido, para aclarar el asunto un poco mas os dire que dentro del divfondo en concreto hay un divclientes y dentro del mismo una tabla que lee de una base de datos, y va colocando los resultados uno debajo del otro según se filtran por lo cual ese div crece o decrece segun los datos que encuentra.

Tal como esta ahora con una altura fija, cuando los resultados de la tabla es mas alto que el valor que le he puesto fijo al divfondo solo me colorea hasta la altura que le he dado fija y lo que preciso es que me coloree hasta el final.

Si no me entendeis os pondre un poco mas de código para que lo veais mejor, el hecho de resumir el código era para que fuera mas legible.

Y de nuevo Gracias a los 2.

PD: Tambien me valdria colorear el Contenedor totalmente pero tampoco he encontrado la forma de hacerlo.

pzin · #5 (**permalink**) 14/10/2012, 15:01

Pues algo está haciendo que las capas que contiene la tabla no estén creciendo. Normalmente suele pasar porque contiene capas u otros elementos flotados —con float:left/right.

Casi mejor que pongas más código o si lo tienes online la URL para echarle un ojete.