Color diferente en parte inferior del sitio segun la resolución

bcjmpr · #1 (**permalink**) 24/02/2011, 15:37

Hola a todos, a ver si me sacan de una duda de nuevo, aquí siempre encuentro respuestas :)

Tengo un sitio con muy poco contenido, todo dentro de un div de tamaño fijo que no puede crecer porque el cliente me pide que no se genere scroll vertical.
El caso es que la he probado en varias resoluciones y se ve bien, pero a partir de 1400px se genera mucho espacio vacío debajo del pie de página (que va justo debajo del div del contenido). Entonces lo que quiero es, en resoluciones mayores a 1400px, agregar un fondo de un color diferente debajo del pie de página y que abarque toda esa parte inferior.

Con javascript detecto la resolución del usuario y llamo una hoja de estilos con lo siguiente:

.footer_bar
{
width:100%;
height: auto;
background-color: #e4e1d7;
}

pero no me funciona, me pone una línea delgada justo debajo del pie de página pero no llega hasta el fondo del monitor. Si a 'height' le doy un valor en px hace la línea más gruesa pero le doy un valor para cubrir toda la parte baja en una resolucion de, digamos, 1600px y si el usuario usa 1400px se genera scroll.

Les agradezco si alguien conoce alguna manera de lograr esto

sanxuan · #2 (**permalink**) 24/02/2011, 16:16

Puedes probar con algo así. No necesita javascript.
El pie tambíen puede ocupar la posición inferior de la página si es necesario con algunos cambios.

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></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
html,body{
    height: 100%;
    margin:0;
    background:#fff;
}
#contenedor{
    width:980px;
    height:100%;
    margin:0 auto;
    background:#f00; /* Aquí el fondo bajo el pie que puede ser una imagen */
}
#contenido{
    min-height:300px; /* puede eliminarse para adaptarse al contenido */
    background:#00f;
}
#pie{
    min-height:90px; /* puede eliminarse para adaptarse al contenido */
    background:#0f0;
}
</style>
</head>
<body>
<div id="contenedor">
    <div id="contenido"></div>
    <div id="pie"></div>
</div>
</body>
</html>

bcjmpr · #3 (**permalink**) 24/02/2011, 16:53

Hola sanxuan, gracias por contestar.

Tu código me ha ayudado, sólo una duda más, ¿cómo puedo hacer que en resoluciones menores no aparezca ese color de fondo? Así como está me aparece justo debajo del pié de página, y quiero dejar un márgen. Margin-top y margin-bottom no hacen el truco...

Gracias!

sanxuan · #4 (**permalink**) 24/02/2011, 17:37

Hay bastantes formas diferentes. Por ejemplo, si en lugar de un color vas a usar una imagen de fondo, puedes usar las propiedad " background: url("img.gif") no-repeat scroll center 700px transparent;" para que aparezca a partir de 700px de altura.
Si pones tu código HTML y CSS y lo que quieres conseguir exactamente se puede afinar algo más. Mejor si tuvieses tu página en internet y compartieras un enlace.

bcjmpr · #5 (**permalink**) 24/02/2011, 20:51

No la tengo aún en servidor pero bueno, aquí va parte del código, creo que lo suficiente, sólo dejé fuera cosas de estilo.

HTML

Código HTML:

<body>

<!--  ********  ENCABEZADO  ********  -->

	<div class="header">
		<ul class="menu">  
			<li><a href="#">Menú 1</a></li>
			<li><a href="#">Menú 2</a></li>
			<li><a href="#">Menú 3</a></li>  
			<li><a href="#">Menú 4</a></li>  
			<li><a href="#">Menú 5</a></li>  
		</ul>
	</div>

<!--  ********  CONTENIDO  ********  -->
	
	<div class="main">Contenido</div>

<!--  ********  PIE DE PÁGINA  ********  -->

	<div class="footer">
	<p>Links, contacto, etc.</p>
	</div>

	<div class="footer_bar"></div>

</body>

CSS

Código:

*
{
margin: 0;
padding: 0;
}

body
{
background-color: #7d011d; /* este color es el fondo de la página, no el que quiero poner debajo del pié */
}

/* ----------------    ENCABEZADO    ------------------ */

.header
{
min-width: 960px;
height: 107px;
background-image: url("../img/bar.jpg");
background-position: center;
}

.menu
{
position: fixed;
top: 3%;
left: 53%;
}

/* ----------------    CONTENIDO    ------------------ */

.main /* aquí dentro va todo mi contenido */
{
width: 957px;
height: 399px;
margin: 40px auto;
background-image: url("../img/main.jpg");
}

/* ----------------    PIE DE PÁGINA    ------------------ */

.footer
{
width: 550px;
margin: 0 auto;
color: #ffffff;
font-size: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}

.footer_bar /* esta es la parte que no consigo */
{
width:100%;
height: auto;
background: #e4e1d7; /* color ejemplo */
}

Si hace falta poner algo más sólo diganme

y gracias de nuevo por la ayuda.