Back in the days, I used to start a page with a html table with 3 rows, one for the header, one for the middle area at 100%, and a footer
Nowadays this approach doesn't work any more and we're told that we have to use pure CSS, not tables, blabla... so, how do we accomplish this with pure CSS?
We are going to need some css and a bit of javascript, first of all, lets see the 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;
}
the most interesting is the last class div.scrollable, overflow:auto makes it scrollable, and the rest is to eliminate the borders and set the color.
Now lets see the 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>
I put a lot of lines in the middle, just so you can see the document scrolling. As a "bonus" I put two divs on the footer, one aligned to the left and one to the right, both in the same "row", this is one of those things that people have a hard time finding. We're almost there, we just need some javascript now:
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';
}
The different browsers have different properties to access the document height and width, we account for that and then assign the size to the main div, call this function on the body onload (and resize!) and we are done, the end result looks like this, you can get the full source from there, hope you find it useful.
No comments:
Post a Comment