Solved

Scroll Height in FireFox

Posted on 2010-08-16
4
683 Views
Last Modified: 2012-05-10
I have the following line of code:

document.getElementById("apDiv1").style.height = document.body.scrollHeight + 'px';

This works in IE, Safari, Chrome but not in FF.  In FF it returns just the visible portion of the page, not the total height, including the scrolling portion.

I see all sorts of people having this issue and some saying that it is related to the content on the page, but I can't seem to figure out what to fix to fix it.  Is there a better way to get the scrollHeight that isn't impacted?

If not, I can post a link up, there is a ton of code so it will not be too straight forward.
0
Comment
Question by:pmessana
  • 2
  • 2
4 Comments
 
LVL 16

Expert Comment

by:HagayMandel
ID: 33450006
Try use: document.getElementById("apDiv1").style.height = document.body.offsetHeight+ 'px';
0
 
LVL 9

Author Comment

by:pmessana
ID: 33450344
Nope, that breaks IE and doesn't fix FF.
0
 
LVL 16

Accepted Solution

by:
HagayMandel earned 500 total points
ID: 33450476
Different approach:

function checkHeight(){
if( window.innerHeight && window.scrollMaxY ) {
var pageHeight = window.innerHeight + window.scrollMaxY;
} else if( document.body.scrollHeight > document.body.offsetHeight ) {
var pageHeight = document.body.scrollHeight;
} else {
var pageHeight = document.body.offsetHeight + document.body.offsetTop;
}
document.getElementById("apDiv1").style.height = pageHeight+'px';
}
</script>

0
 
LVL 9

Author Comment

by:pmessana
ID: 33450867
Bingo!  that worked.

Still not sure why the other one didn't work but now that I have that nifty function I am moving on.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 39
100% tall div not scrollable on iPhone 3 20
Html Newline 7 21
Ajax and PHP 9 30
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question