I've been designing a web application that scales to fit the available window space in the web browser so that there is no need to use the scroll bar (and the whole point of the application is to fit the window). I've already figured out how to catch resizes and change the height of the elements on the page (It's pretty simple using onload, onresize and document.getElementById().style.height), but I can't seem to get an accurate height to scale the web content with. The height I want is not the height of the document (Which would be the height of the content...which is what I'm trying to change in the first place!) and not the height of the window (Because if I'm not mistaken that includes the status bar, the tab bar, the URL bar, etc. which can vary between browsers). I need the height of the available web space that I can fit my content into. This would be the space between below the tab bar and above the status bar (To make my height as clear as possible I've provided a link to a screenshot). How can I get this height with Javascript (And I really need it to be cross-browser because I want this app to be able to work on multiple browsers)?

Screenshot (For some reason the DaniWeb Attachment System just refuses to upload my image and gives me a blank page each time I upload the screenshot so I'll just upload it to an image host): http://img15.imageshack.us/img15/4186/screenshothyb.jpg

Recommended Answers

All 2 Replies

That works perfectly!! Thanks so much!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.