Forum Moderators: open
Basically, I am having problems getting a div element to be 100% of the screen height. I want it to take up 100% of the viewable screen if there is less than a screen-full of content on the page, but 100% of the page document, if there is more than one screen-full of content.
So I am looking at a JavaScript workaroung for this, and I can NEARLY manage it. I am viewing this in Firefox and the result is that the div resizes perfectly if I have my window mazimised, but it falls a little short of the full height as soon as a make the window smaller.
Here is the JavaScript I am using. "frame1" is the name of the div that I want to resize. The div completely encloses all content within the body element.
<script type="text/javascript">
function resize(){
var htmlheight = document.body.parentNode.clientHeight;
var windowheight = window.screen.height;
var frame = document.getElementById("frame1");
if ( htmlheight < windowheight )
{ frame.style.height = windowheight + "px"; }
}
</script>
And in the HTML's body tag I have this:
<body onload="resize()" onresize="resize()">
Does anyone know how I can tweak this? Also, does anyone know of any potential compatability problems in other recent browsers (I'm not worried about ancient browsers too much).
I have tried using
window.screen.availHeightand
window.innerheightas alternatives to
window.screen.heightbut they don't do the job.
document.getElementById("frame1").style.height='100%'
Unfortunately not. I have tried it.
The CSS stylesheet already specifies that the frame1 div has 100% height, but as you'll see from the original thread that I linked to, this works in IE6 but not in Firefox.
If there is a lot of content on the page, the div remains at 100% of the screen height (the amount of the page that the user can see when the page loads), but NOT 100% of the entire document height.
window height and document height?
I do not understand the differnece you make between window height and document height?
In the resize() function, the variable "htmlheight" is the height of all the rendered HTML in the document. I have also referred to this as the "document height". For a page with little content, this may be, say 350 pixels high. For a page with much content, it may be, say, 1400px high.
The variable "windowheight" is the height of the user's browser screen. This will depend on the user's screen resolution, on the presence of browser toolbars, status bars, whether the browser window is maximised or not, etc. For a standard 1024 x 800 resolution, the windowheight may be around 760 pixels.
So, when the "htmlheight" is less than the "windowheight", I want the frame1 div to stretch, to be the same height as "windowheight".
But when the "htmlheight" is greater than the "windowheight", I want the frame1 div to stretch to the "htmlheight". It ought to do this anyway, but for some reason it is not in Firefox.
The desired results:
a) Stretching the div to the window height if the document height is currently smaller than the window height.
b) Stretching the div to the document height if the document height is greater than the window height.
function resize(){
var frame = document.getElementById("frame1");
var htmlheight = document.body.parentNode.scrollHeight;
var windowheight = window.innerHeight;
if ( htmlheight < windowheight ) { frame.style.height = windowheight + "px"; }
else { frame.style.height = htmlheight + "px"; }
}
When I switched to using an XHTML Strict doctype (was previously XHTML Transitional), for everything to display properly in Firefox, I need to add to the JavaScript code so that the body element was also resized, in addition to the frame div. So, the full code is:
function resize(){
var frame = findObj("frame1");
var htmlheight = document.body.parentNode.scrollHeight;
var windowheight = window.innerHeight;
if ( htmlheight < windowheight ) { document.body.style.height = windowheight + "px"; frame.style.height = windowheight + "px"; }
else { document.body.style.height = htmlheight + "px"; frame.style.height = htmlheight + "px"; }
}
I have replaced the line. So the full code is:
function resize(){
var frame = document.getElementById("frame1");
var htmlheight = document.body.parentNode.scrollHeight;
var windowheight = window.innerHeight;
if ( htmlheight < windowheight ) { document.body.style.height = windowheight + "px"; frame.style.height = windowheight + "px"; }
else { document.body.style.height = htmlheight + "px"; frame.style.height = htmlheight + "px"; }
}
