What is the difference between height, scrollHeight and style.height

[jadeite100]

Hi:

I have a IFrame called "dataFrame". Does anybody know the difference between

document.getElementById('dataFrame').height

and

document.getElementById('dataFrame').Document.body .scrollHeight;

and

document.getElementById('dataFrame').style.height

function shrinkIFrame() {

var theFrame=document.getElementById('dataFrame');
var header,headerHeight,footer,navPrimaryMenu,navPrima ryMenuHeight,mainMenu2,iFrameHeight,mainMenu2Heigh t,wholeWindowHeight;
var totalHeight,differenceHeight;

if(theFrame){

theFrame.style.display="block"
if(theFrame.Document && theFrame.Document.body.scrollHeight)
{


header=parent.document.getElementById('Header2');
navPrimaryMenu=parent.document.getElementById('nav PrimaryMenu');
mainMenu2=parent.document.getElementById('mainMenu 2');

headerHeight = header.offsetParent.offsetHeight;
navPrimaryMenuHeight=navPrimaryMenu.scrollHeight;
mainMenu2Height=mainMenu2.scrollHeight;
wholeWindowHeight=document.body.offsetHeight;
iFrameHeight =theFrame.Document.body.scrollHeight;

totalHeight =headerHeight+mainMenu2Height+navPrimaryMenuHeight ;

differenceHeight = wholeWindowHeight - totalHeight;



//alert("differenceHeight: " + differenceHeight);

if (iFrameHeight > differenceHeight)
{
// 92 represent the row header, one row and the scrollbar
//alert("iFrameHeight > differenceHeight");
if (differenceHeight > 92)
{

theFrame.style.height=differenceHeight+ 'px';
}
else
{
alert("theFrame.height:"+theFrame.height+"theFrame .Document.body.scrollHeight:"+theFrame.Document.bo dy.scrollHeight);
alert("differenceHeight:"+differenceHeight+"theFra me.style.height:"+theFrame.style.height);

theFrame.height=theFrame.Document.body.scrollHeigh t;

}

}
else
{

theFrame.style.height = differenceHeight +'px';
}


}
if(theFrame.attachEvent){

theFrame.detachEvent("onload", readjustIframe)
theFrame.attachEvent("onload", readjustIframe)
}
}

}

Yours,

Frustrated

[notjustgraphics]

I have a IFrame called "dataFrame". Does anybody know the difference between

document.getElementById('dataFrame').height

This returns the height of the entire object, in this case, the iframe named 'dataFrame' including margins and borders.

and

document.getElementById('dataFrame').Document.body.scrollHeight;

This returns the height of the viewable port of a scrollable element without margins and broder, in this case, the iframe named 'dataFrame'.

DOM:element.scrollHeight - MDC

and

document.getElementById('dataFrame').style.height

This returns the height of an element set through CSS such as a DIV.

Hope this helps.

Mike.