Javascript to set div height based on _unused_ space

**Kerrick** · 09-26-2008, 05:25 PM

I am relatively new at Javascript, so please bear with me. I'm trying to find out the height of space from the bottom of the outputted HTML from a PHP program, to the bottom of the viewport, and have Javascript set my next div height as that amount. Is this possible, assuming that the outputted HTML can vary from page load to page load, and even on one load due to a collapsible header?

**chrishirst** · 09-26-2008, 06:18 PM

http://www.webmaster-talk.com/javasc...avascript.html

**Kerrick** · 09-26-2008, 06:25 PM

Believe it or not, I did look at that thread before posting this. However, I need something like this:

pseudo-code:

Code:

<html><head></head><body>
<div class="output">
lorem ipsum
</div>
<div id="frame">
my content here
</div>
</body></html>

Where the outputted content can be anything, and I'd need something like:

Code:

document.getElementById(DivID).style.height = document.getElementById(DivID).clientHeight - document.getElementByClass(output).style.height

**Kerrick** · 09-26-2008, 06:46 PM

Nevermind, I found it. Here's the code, in case anybody wants to know.

Code:

      <iframe id="frame" style="width:100%;border:0;padding:0;margin:0;background:white;" src="http://www.webmaster-talk.com"></iframe>
	  <script type="text/javascript">
function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= document.getElementById("frame").offsetTop;
    document.getElementById("frame").style.height = height +"px";
    
};
document.getElementById("frame").onload = resizeIframe;
window.onresize = resizeIframe;
</script>