Foros del Web » Creando para Internet » CSS »

Problema footer en maquetacion a 3 columnas

Estas en el tema de Problema footer en maquetacion a 3 columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/01/2009, 10:51
pr0
 
Fecha de Ingreso: marzo-2004
Mensajes: 687
Antigüedad: 13 años, 8 meses
Puntos: 28
De acuerdo Problema footer en maquetacion a 3 columnas

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
  #2 (permalink)  
Antiguo 27/01/2009, 11:08
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: Problema footer en maquetacion a 3 columnas

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
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #3 (permalink)  
Antiguo 27/01/2009, 11:18
pr0
 
Fecha de Ingreso: marzo-2004
Mensajes: 687
Antigüedad: 13 años, 8 meses
Puntos: 28
Respuesta: Problema footer en maquetacion a 3 columnas

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?
  #4 (permalink)  
Antiguo 27/01/2009, 11:20
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: Problema footer en maquetacion a 3 columnas

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
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #5 (permalink)  
Antiguo 27/01/2009, 11:30
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Problema footer en maquetacion a 3 columnas

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!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #6 (permalink)  
Antiguo 27/01/2009, 11:47
pr0
 
Fecha de Ingreso: marzo-2004
Mensajes: 687
Antigüedad: 13 años, 8 meses
Puntos: 28
Respuesta: Problema footer en maquetacion a 3 columnas

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
  #7 (permalink)  
Antiguo 27/01/2009, 11:50
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: Problema footer en maquetacion a 3 columnas

Podrías usar un Script como dijo Dalvenjha.

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

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #8 (permalink)  
Antiguo 27/01/2009, 17:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema footer en maquetacion a 3 columnas

Mira a ver si esta forma de hacerlo te da una idea o te sirve de algo.
__________________
Visita mi nueva web idplus.org
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 20:08.