Capa al Pie y Cabecera fijas, y alto del contenido adaptado

b3nshi · #1 (**permalink**) 03/04/2011, 12:14

Buenas tardes,

no se si el titulo explicara bien lo que quiero hacer, pero para que se entienda mejor, pueden visitar el siguiente link:
www.xiromtuc.com.ar/sistemax

Bueno, ahora si, lo que necesito es hacer que el menu superior este siempre arriba y el pie tambien este siempre abajo.

Si ven la dirección que les pase, tenemos a grandes rasgos tres secciones: menu, contenido y pie.

Supongamos que yo asi como esta maquetado ahora aprieto F11 (pantalla completa), entonces el tamaño de la capa contenido sera el mismo y "pie" ya no va a estar al pie de pagina.

Lo que hice para maquetar asi, fue colocarle a la capa "contenido" una altura fija. Intente de muchas maneras hacer esto que quiero. Pero no logre obtener buenos resultados. Ya que si por ejemplo hago que las alturas sean en %, las capas "menu" y "pie" se agrandaban al poner pantalla completa y se pierde el diseño.

Probé también con position fixed y position absolute en las 3 capas. El problema era darle la altura a la capa "contenido".
Es decir, hago que la capa "pie" y la capa "menu" esten donde quiero, e incluso la capa "contenido" aparece inmediatamente abajo de la capa "menu", pero la altura no es correcta, ya que si le coloco "100%", en este caso el largo de la misma queda por debajo de la capa "pie".

Entonces para repasar:
Capa Menu: Al tope de la pagina con una altura fija.
Capa Contenido: En el medio, con altura variable. Que empiece debajo de "menu" y termine donde empieza "pie". Overflow:Hidden. (para que el contenido que no entre no se vea).
Capa Pie: Al pie de la pagina. Altura fija.

Estuve probando muchas cosas y no logre buenos resultados, lo que me queda probar, y calculo que si podre hacerlo es con javascript. Pero no quiero recurrir a ese lenguaje si no es necesario. Por eso mi pregunta.

Desde ya muchas gracias a todos!

Saludos

uikekarallo · #2 (**permalink**) 03/04/2011, 18:57

Hola.

Siento comunicarte que la solución está en JavaScript :) La única manera de saber en qué posición debe estar ese pie de página es conociendo la resolución del navegador del usuario que la está viendo.

La otra manera es tener suficiente contenido en la capa central como para empujar el pie de página hasta unos 850px de alto aproximadamente. Así cubrirías prácticamente todas las resoluciones de usuario hasta 1080px de altura (850+cabecera del navegador+menú inicio). Pero esto tampoco es una ciencia cierta, porque cada usuario tiene "su manera de ver las cosas". Hay quien navega a pantalla completa, hay quien oculta la barra de menú inicio y hay hasta quien hace las 2 cosas...

Siento no poder ayudarte más. Un saludo.

conexion · #3 (**permalink**) 03/04/2011, 20:21

Creo que esto es lo que necesitas (pruébalo en un documento en blanco y luego lo adaptas a tu diseño):

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Head - Contenido - Pie siempre fijos</title>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}
#cabecera {
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0;
	background-color: #000;
	overflow: hidden;
}
#contenido {
	width: 100%;
	position: absolute;
	top: 100px;
	bottom: 50px;
	background-color: #888;
	overflow: hidden; /* o 'auto' según convenga */
}
#pie {
	width: 100%;
	position: absolute;
	height: 50px;
	bottom: 0;
	background-color: #000;
	overflow: hidden;
}
.ejemplo {
	margin-top: 300px;
}
</style>

</head>

<body>

<div id="cabecera"></div>
	<div id="contenido">A esta composición no le afecta la resolución de pantalla: la cabecera y el pie siempre estarán en su lugar y a su tamaño
		<p class="ejemplo">Ejemplo de línea de texto situada más abajo</p>
	</div>
<div id="pie"></div>

</body>


</html>

uikekarallo · #4 (**permalink**) 04/04/2011, 02:48

Lleva razón. Utilizando posición absoluta en todas las capas es posible hacerlo. Perdona b3nshi, no caí en la cuenta de ello *^^*

Saludos.

b3nshi · #5 (**permalink**) 25/04/2011, 12:52

Me remil olvide q habia preguntado por aqui acerca de como resolver el problema, muchas gracias a los dos por contestarme! xD

Probe lo de conexion y funciona exactamente como queria... nuevamente muchas gracias!!! xD

Saludos