Help
I want the height of the iframe to fill the rest of the page, but if I put height 100% then the size of the window is 100% plus 97px so I end up with 2 scroll bars (1 for the window and 1 for the iframe).
What I want is 100% - 97px but I don't know how to achieve this without using javascript (which is slow in calculating the size it should be).
If I make the bar 10% and the iframe 90% then effectively works perfect until I come to resize the window, the size of the bar at the top changes which I don't want to happen.
It might be easier if you check my site (sorry, I don't mean this to be a plug but it will require you to sign up)
My site
If someone has an alternative method I would very much appreciate it. This is the Javascript code that I am using at the moment.
<body onload="OnPageLoad()" onresize="doResize()">
<script type="text/javascript">
function OnPageLoad() {
doResize();
//ajaxArray();
timedCount();
}
</script>
<script type="text/javascript">
function doResize() {
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.getElementById("frame").height = viewportheight - 97;
}
</script>
