Ver Mensaje Individual
  #4 (permalink)  
Antiguo 29/09/2008, 18:51
ssclamp
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Div en el Pie de Pagina

No estoy seguro de haberte entendido bien, pero si lo que quieres es dividir la pantalla en tres franjas horizontales, de las cuales la de arriba (cabecera) y la de abajo (pie) estén siempre visibles (sea cual sea el contenido de la página), el siguiente ejemplo te servirá:

Cabecera = fija y siempre visible (sin scroll)
Cuerpo (contenido de la página) = lleva scroll
Pie = fijo y siempre visible (sin scroll)

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Cabecera y pie fijos</title>
<style type="text/css">
html body {
	margin:0;
	overflow: hidden;
}
#contenedor {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}	
#cabecera {
	width: 100%;
	height: 10%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	background-color:#CCCCCC;
	padding: 3px;
	text-align: center;
	overflow: hidden;
}	
#cuerpo {
	width: 100%;
	height: 83%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#ffffff;
	padding: 3px;
	text-align: center;
	overflow: auto;
}	
#pie { 
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 7%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#CC0000;
	color:#FFFFFF;
	padding: 3px;
	text-align: center;
	overflow: hidden;
}	
</style>

</head>

<body>
<div id="contenedor">
	<div id="cabecera">La cabecera se mantiene siempre visible</div>
	<div id="cuerpo">
		<div style="height: 1000px;">Esta composición funciona en cualquier resolución y esta capa tiene su propio
		scroll por si el contenido es mayor que la pantalla,<br /> y nunca empuja al pie a salirse de la pantalla.<br /><br />
		Este conjunto funciona en ie6, ie7, firefox, opera...
		</div>
	</div>
	<div id="pie">El pie se mantiene siempre visible</div>
</div>
</body>

</html> 
Cuéntanos si es esto lo que buscas.

Saludos

//Este tema es de css y no de javascript//

Última edición por ssclamp; 29/09/2008 a las 19:07