En los viejos tiempo (no hace ni tanto) yo empezaba una pagina con una table html con 3 rows, uno para el encabezado, uno para el area principal (al 100% de tamaño) y uno para el footer
En estos dias esto ya no funciona, y ademas nos dicen que debemos usar CSS puro, que nada de html y no se que... pero como logramos esto con puro CSS?
Vamos a necesitar algo de CSS y un poco de javascript, primero vamos a ver el CSS
html,body,form
{
margin:0;
padding:0;
}//prevent some default spacing on some browsers
.header
{
text-align:center;
background-color:Navy;
color:White;
width:100%;
}
.footer
{
background-color:Orange;
color:Navy;
position:absolute;
bottom:0;
border:0;
}
div.scrollable{
overflow:auto;
border-left-width:0px;
border-bottom-width:0px;
border-top-width:0px;
border-right-width:0px;
background-color:Gray;
color:White;
position:absolute;
}
Lo mas interesante es la clase div.scrollable; la propiedad overflow:auto hace que el DIV sea scrollable, y el resto es para eliminar los border y poner algo de color.
Ahora vamos a ver el html:
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="test.css" />
<body>
<div>
<div id="header" class="header" height="20px">
This is the header
</div>
<div id="mainDiv" class="scrollable">
This is the main body<br>
There is a lot of stuff in the main
<br><br><br><br><br><br><br><br><br><br>
There is a lot of stuff in the main
<br><br><br><br><br><br><br><br><br><br>
There is a lot of stuff in the main
<br><br><br><br><br><br><br><br><br><br>
There is a lot of stuff in the main
<br><br><br><br><br><br><br><br><br><br>
There is a lot of stuff in the main
<br>
<br><br><br>
This is the last line
</div>
<div id="footer" class="footer" height="20px">
<div style="float:left">This is a div on the left</div>
<div style="float:right">This is a div on the right</div>
</div>
</div>
</body>
</html>
A proposito he puesto muchas lineas en la seccion media, para que se pueda apreciar que el documento hace scrolling (solo en la parte de enmedio, el header y footer siempre se quedan en su lugar). Tambien como un "bono" puse 2 divs en el footer, uno alineado a la izquierda y otro a la derecha, ambos a la misma altura, ya que me he dado cuenta que esta es una de las cosas que mucha gente batalla para lograr. Ya mero terminamos, solo necesitamos un poco de Javascript:
var mainDivHeight;
var mainDivWidth;
function AdjustFullSize() {
var screenHeight = 450;
var screenWidth = 610;
if (window.innerHeight) {
screenHeight = window.innerHeight;
screenWidth = window.innerWidth;
}
else if (document.body) {
screenHeight = document.body.clientHeight;
screenWidth = document.body.clientWidth;
}
mainDivHeight = screenHeight - 20 - 20; //20+20 for header and footer
mainDivWidth = screenWidth - 0;
document.getElementById('mainDiv').style.height = mainDivHeight + 'px';
document.getElementById('mainDiv').style.width = mainDivWidth + 'px';
}
Diferentes browsers tienen diferentes propiedades para accesar el tamaño del documento, asi que nos encargamos de eso y luego asignamos el tamaño al maindiv que es nuestra area principal, mandamos llamar esta funcion en el "onload" (y tambien en el onresize!) y listo, el resultado final es este, puedes obtener el codigo completo de ahi, espero que les sea util.
salu2
Posts
1 comment:
Gracias bro me sirvio muchisimo el ejemplo y el codigo para apoyarme para mi trabajo, va por ahi mas o menos un machote, pero cambian en mas de una vez, pero me aclaro las lagunas(oceanos) sobre el manejo de encabezados y pie de pagina obligatorios en mi proyecto :D.
Saludos y nuevamente gracias
Post a Comment