Problema footer en maquetacion a 3 columnas

pr0 · #1 (**permalink**) 27/01/2009, 10:51

Buenas a todos,
tengo una maquetación en CSS a 3 columnas con header y footer. La cosa no va mal pero no se porque razón el pie no llega a ocupar el resto de pantalla que queda libre. Pongo captura para aprecia mejor el problema:

Los estilos son estos:

Código:

body,html{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

#container{
	position:relative;
	left:0;
	top:0;
	width:100%;
	min-height:100%;
	overflow:hidden;
}

*html #container{
	height:100%;
	overflow:visible;
}

#header{
	position:relative;
	left:0;
	top:0;
	width:100%;
	height:100px;
	background:cyan;
}

#cuerpo{
	position:relative;
	left:0;
	top:0;
	width:100%;
	min-height:600px;
	overflow:hidden;
}

*html #cuerpo{
	height:600px;
	overflow:visible;
}

#cuerpo div.col{
	position:relative;
	display:block;
	left:0;
	top:0;
	min-height:600px;
	float:left;
	overflow:hidden;
}

#cuerpo #col1{
	background:green;
	width:5%;
}
#cuerpo #col2{
	background:#CDE9F8;
	width:76%
}
#cuerpo #col3{
	background:steelblue;
	width:19%;
}

*html #cuerpo div.col{
	height:600px;
	overflow:visible;
}

#footer{
	position:relative;
	left:0;
	top:0;
	width:100%;
	height:60px;
	background:red;
	overflow:hidden;
}

El HTML este:

Código:

<body>
<!-- DIV CONTENEDOR -->
<div id="container">

  <div id="header">header</div>
    <div id="cuerpo">
        <div id="col1" class="col">col1</div>
        <div id="col2" class="col">col2</div>

        <div id="col3" class="col">col3</div>
    </div>
    <div id="footer">footer</div>
    
</div>
</body>

Si al HEADER le pongo height 200px entonces si me ocupa toda la pantalla pero en mi caso lo necesito de 100px.

Saludos y gracias

Distriker · #2 (**permalink**) 27/01/2009, 11:08

Creo que es sencillo (solo creo), solamente ponerle a este codigo:

Código:

#footer{
	position:relative;
	left:0;
	top:0;
	width:100%;
	height:60px (aumentar);
	background:red;
	overflow:hidden;
}

Solo ponerle mas height a ese code.

Saludos

pr0 · #3 (**permalink**) 27/01/2009, 11:18

gracias por tu respuesta pero digo yo una cosa, si luego alguien tiene mas resolucion o menos de la que estoy usando yo entonces volvere a tener el mismo problema ¿verdad?

Distriker · #4 (**permalink**) 27/01/2009, 11:20

No se..., creo que si, pero sería cuestión de probarlo

, probamos??, que resolución tienes??

Probamos conmigo

o simplemente cambiate tu resolución.

Saludos

Dalvenjha · #5 (**permalink**) 27/01/2009, 11:30

Hey pro, estás usando mi maquetación ^^ que bueno ser útil, las medidas están asi porque se hizo para un tamaño fijo inicial, pero que podría ir creciendo, vamos que no me gustan los porcentajes, combinar porcentaje con medidas fijas es un dolor de cabeza, si me dices coo quieres la página, te puedo asesorar, podríamos usar algo de javascript para que ocupe el 100% sea como sea. De hecho ya lo puse en otro post.

Lo más recomendable pero, es aumentar el tamaño del cuerpo, en vez del footer.

Saludos!!

pr0 · #6 (**permalink**) 27/01/2009, 11:47

Hola de nuevo
pues si, lo suyo sería que el cuerpo tenga siempre el height necesario para que ocupe toda la pantalla.
Mi pagina en principio quiero que siempre tengan el header y el footer con un tamaño fijo y que sea el cuerpo el que se haga mas o menos grande dependiendo de su contenido PERO cuando el cuerpo no sea lo suficientemente grande para llenar la pantalla entonces que igualmente la ocupe toda. No se si me entiende.

P.D: yo uso 1280x1024

Saludos

Distriker · #7 (**permalink**) 27/01/2009, 11:50

Podrías usar un Script como dijo Dalvenjha.

No te puedo ayudar, tengo la misma, perdón

.

Saludos

Mikmoro · #8 (**permalink**) 27/01/2009, 17:16

Mira a ver si esta forma de hacerlo te da una idea o te sirve de algo.