.scrollHeight in firefox.

[cmor]

In reference to another post.. http://www.webdeveloper.com/forum/sh...ad.php?t=73044

calling scrollHeight in firefox seems to only return the visible height of a div. Is there anyway to calculate the entire height of a div?

[Mr J]

Have you tried offsetHeight

[cmor]

Yeah, offsetHeight does the same thing.

[Mr J]

Can you post your code?

Or try the following

PHP Code:

<div id="test" style="height:50px;overflow:auto">Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>Hello World<br>
</div>

<script>
alert(document.getElementById("test").offsetHeight+" "+document.getElementById("test").scrollHeight)
</script>


I get 50 and 340 in Firefox

[cmor]

Thanks for the response Mr J. That code works fine fore me as well, but if the 'hello world' text extends past the bottom of the page it 'stops counting' so to speak.

Here's a simplified version of my code:

PHP Code:

<div style="position:absolute; width:484px; left: 30px; top: 135px;" id="maintext">
<p>whole bunch of text that makes it extend down for two or three pages</p></div>

<div style="position:absolute; width:484px; left: 30px; top: 135px;" id="maintexttrans"> </div>

<SCRIPT>
document.getElementById('maintexttrans').style.height = document.getElementById('maintext').scrollHeight + 'px';
</SCRIPT>


.scrollHeight works fine if the div does not extend beyond the bottom of the page, but after that it appears to "stop counting" in firefox.

[cmor]

bump. Thanks for the help thus far..

[cmor]

bump again, does anyone have an instance of .ScrollHeight working differentlly in firefox?

[cmor]

bump because as of now, I'm not seeing it, and it hasn't fixed itself.

[Ultimater]

Try:

<div style="position:absolute; width:484px; left: 30px; top: 135px; line-height:12px;font-size:10px; font-family:arial; margin:0; padding:0; text-align:left; vertical-align:center" id="maintext">

Gets pretty darn close when using:

<script type="text/javascript">
onload=function(){
alert(document.getElementById('maintext').scrollHeight)
}
</script>

Seems like a CSS issue to me.

[cmor]

Thanks for the reply it seems that perhaps the formatting in my text was causing problems. I still do not totally understand why. If I remove all formatting it seems to work, even without the,

line-height:12px;font-size:10px; font-family:arial;

added. Back to work on that.