Hi,
I'm after a way to make div#page-container (bordered in red) to 100% height of the browser window on the following page - http://www.prettypollution.com.au/test
As you can see it has a padding of 86px to take into account the footer area that snaps to the bottom.
Any ideas?
This css to your footer:
#footer
{
margin-top: /*Height of your footer */
}
BTW, nice design
Hi,
Try the below code. It will lend you 100% height of container.
Source Code
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>DIV layout test</title>
<style type="text/css">
body{
margin: 0;
font-family: tahoma;
font-size: 12px;
color: #645728;
}
#header{
display: block;
width: 100%;
background: #fcf1cb;
}
#middle{
display: block;
width: 100%;
border-top:none;
background: #bce5e3;
}
#footer{
display: block;
width: 100%;
border-top: none;
background: #fcf1cb;
}
</style>
<script type="text/javascript">
function getWindowInnerH(){
var innerH = null;
if (typeof(window.innerHeight) == "number"){//MOZILLA, OPERA
innerH = window.innerHeight;
}else if (typeof(document.documentElement.clientHeight) == "number"){//IE 6+
innerH = document.documentElement.clientHeight;
}
return innerH;
}
function arrange(){
var headerE = document.getElementById("header");
var middleE = document.getElementById("middle");
var footerE = document.getElementById("footer");
if (!headerE || !middleE || !footerE){
return;
}
//get window's inner height
var innerH = getWindowInnerH();
//get header's and footer's height
var headerH = headerE.offsetHeight;
var footerH = footerE.offsetHeight;
//calc middle's heigth
var middleH = Math.round(innerH - (headerH + footerH));
//set header's and footer's height
headerE.style.height = headerH + "px";
footerE.style.height = footerH + "px";
//set middle's height
middleE.style.height = middleH + "px";
}
window.onresize = arrange;
</script>
</head>
<body onload="arrange()">
<div id="header">header content<br/><br/><br/><br/><br/></div>
<div id="middle">middle content</div>
<div id="footer">footer content<br/><br/></div>
</body>
</html>
Hope this helps.