Centrar div entre header y footer

Joni2Back · #1 (**permalink**) 27/04/2009, 22:03

hola amigos, tengo una consulta que debe ser bastante comun pero no encuentro ninguna solucion eficaz.....

lo que quiero hacer es
tener una div entre medio de un header(arriba) y un footer(abajo) que aunque maximize o achique la ventana, siempre este en el medio....

supongamos que si fuera con tablas seria asi:

Código HTML:

Ver original<table border="1" width="100%" height="100%">
    <tr>
        <td class="header" valign="top" height="50"></td>
    </tr>
    <tr>
        <td align="center"                valign="middle"                    ></td>
    </tr>
    <tr>
        <td class="footer" valign="bottom"  height="50"></td>
    </tr>
</table>

.... pero en este caso, yo quiero usar divs, aca adjunto una imagen por si no se entiende...

Newbie001 · #2 (**permalink**) 27/04/2009, 22:13

a ver si esto funciona

Código HTML:

<style type="text/css">
<!--
* {
margin:0;
padding:0;
outline:none;
}
body {
width:100%;
height:100%;
}
contenedor {
height:100%;
width:la que quieras;
margin:0 auto;
}
header {
width:100%;
height:la que quieras;
position:relative;
top:0;
}
medio {
height:la que quieras;
width:la que quieras;
margin:auto; /* esto es lo que centraria el div */
}
footer {
width:100%;
height:la que quieras;
position:relative;
bottom:0;
}
-->
</style>
</head>
<body>
<div id="contenedor">
     <div id="header">
     </div>
     <div id="medio">
     </div>
     <div id="footer">
     </div>
</div>

no estoy seguro pero es cuestion de probar, suerte

Joni2Back · #3 (**permalink**) 27/04/2009, 22:22

Cita:

Iniciado por Newbie001

a ver si esto funciona

Código HTML:

<style type="text/css">
<!--
* {
margin:0;
padding:0;
outline:none;
}
body {
width:100%;
height:100%;
}
contenedor {
height:100%;
width:la que quieras;
margin:0 auto;
}
header {
width:100%;
height:la que quieras;
position:relative;
top:0;
}
medio {
height:la que quieras;
width:la que quieras;
margin:auto; /* esto es lo que centraria el div */
}
footer {
width:100%;
height:la que quieras;
position:relative;
bottom:0;
}
-->
</style>
</head>
<body>
<div id="contenedor">
     <div id="header">
     </div>
     <div id="medio">
     </div>
     <div id="footer">
     </div>
</div>

no estoy seguro pero es cuestion de probar, suerte

hola, gracias por responder, pero probe y no funciona..... las divs quedan las 3 arriba....
y eso que les agregue los # para indicar que eran id

Newbie001 · #4 (**permalink**) 28/04/2009, 04:11

una lastima. a ver si alguien mas te puede dar una mano, suerte

Mikmoro · #5 (**permalink**) 29/04/2009, 08:33

Se necesitan más datos para saber si es viable:
¿los tamaños son fijos?
¿nunca más alto el conjunto que una página o podrá haber más contenido y aparecer un scroll?
¿cabecera y pie siempre pegados arriba y abajo se reduzca lo que se reduzca?

Etcétera. Concreta y será más fácil recibir ayuda.

Joni2Back · #6 (**permalink**) 29/04/2009, 11:03

Cita:

Iniciado por Mikmoro

Se necesitan más datos para saber si es viable:

Etcétera. Concreta y será más fácil recibir ayuda.

¿los tamaños son fijos?
el del header y footer si !, pero la div del medio tendria que medir TODO LO QUE SOBRE

¿nunca más alto el conjunto que una página o podrá haber más contenido y aparecer un scroll?
SI ES MUY ALTO EL CONTENIDO, EL SCROLL SE ABRIRA Y EL FOOTER SE VA HACIA EL FONDO

¿cabecera y pie siempre pegados arriba y abajo se reduzca lo que se reduzca?
SI

Newbie001 · #7 (**permalink**) 29/04/2009, 11:49

Cita:

Iniciado por rayden12345

¿los tamaños son fijos?
el del header y footer si !, pero la div del medio tendria que medir TODO LO QUE SOBRE

tu dibujo no muestra eso :S no entiendo cual de las 2 soluciones es la que precisas

ssclamp · #8 (**permalink**) 29/04/2009, 12:12

Coincidiendo con Mikmoro en la falta de precisión y antes de que rayden12345 precisara más (y viendo su primera petición) hice este acercamiento a una estructura que mantiene fija la cabecera y la base y flota el contenido en altura (en el hueco libre que dejan la cabecera y la base) pero con tamaño fijo en altura.

Funciona correctamente en muchos browsers y no le afecta la resolución de pantalla, pero al tener el cuerpo central un tamaño fijo en altura, sólo queda optimizado para una resolución de 1024x768 y sus cercanas, p.e. 1280x800, aunque el centrado flota perfectamente en cualquier resolución.

Quizás pueda valer como punto de partida y, si alguien aporta ajustes que permitan la adaptación a porcentajes, mejor que mejor.

Saludos

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>Cabecera, base y cuerpo central centrado en el ancho y en el alto</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#conjunto {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#cabecera {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100px; /*si se cambia este valor se debe cambiar también el valor de 2 - mirar en portacuerpo*/
	background-color: blue;
}
#base {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100px;
	background-color: purple;
	z-index: 101;
}
#portacuerpo {
	position: relative;
	top: 100px; /* valor 2: cambiarlo por el mismo valor que el height de cabecera*/
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: yellow;
}
#cuerpo {
	position: absolute;
	width: 780px;
	height: 340px;
	margin-left: -390px;
	margin-top: -270px; /*este valor debe ser siempre la mitad que su height (en este caso es 340px) + el valor del height de la cabecera (en este ejemplo es 100px) = la mitad de 340 es 170 y se le suma 100 de la altura de la cabecera, total: 270px */
	top: 50%;
	left: 50%;
	background-color: red;
	overflow: auto;
	z-index: 100;
}
.texto {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
	line-height: 100px;
}
.texto2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
}
</style>
</head>

<body>
<div id="conjunto">
	<div id="cabecera" class="texto2">Contenido de la cabecera<br /><br />Estructura con cabecera y base siempre fijas en pantalla y contenido en un cuerpo central que siempre flota centrándose en el ancho y en la altura libre que hay entre la cabecera y la base, independientemente de la resolución del monitor.<br />Probado en ie6, ie7, ie8, ff 2.0.018 y 3.0.5, opera 9.64 y chrome 4.154. Y en pantallas de 1024x768, 1280x1024 y 1280x800 píxeles. Optimizado para 1024x768.</div>
	<div id="portacuerpo">
		<div id="cuerpo" class="texto">Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br /></div>
	</div>
	<div id="base" class="texto">Contenido de la base</div>
</div>
</body>

</html>

Mikmoro · #9 (**permalink**) 29/04/2009, 14:54

Cita:

Iniciado por rayden12345

¿los tamaños son fijos?
el del header y footer si !, pero la div del medio tendria que medir TODO LO QUE SOBRE

¿Si ocupa "TODO LO QUE SOBRE" cómo lo piensas centrar verticalmente? es imposible, porque ocupa todo.

P.D.: por escrito, al usar mayúsculas parece que gritaras, y cuando pones en mayúsculas la aclaración a una duda parece que dijeras: "esto es lo que quería decir, estúpido". Seguramente no es tu intención pero es así como suena.

Joni2Back · #10 (**permalink**) 29/04/2009, 22:35

Cita:

Iniciado por Mikmoro

¿Si ocupa "TODO LO QUE SOBRE" cómo lo piensas centrar verticalmente? es imposible, porque ocupa todo.

P.D.: por escrito, al usar mayúsculas parece que gritaras, y cuando pones en mayúsculas la aclaración a una duda parece que dijeras: "esto es lo que quería decir, estúpido". Seguramente no es tu intención pero es así como suena.

la div esa va a ser invisible..... igualmente lo que quiero centrar es el contenido.......hagamos de cuenta que esa div seria un td con valign="middle"