File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Controlling DIV and/or TR height Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Controlling DIV and/or TR height" Watch "Controlling DIV and/or TR height" New topic

Controlling DIV and/or TR height

Jay Damon
Ranch Hand

Joined: Jul 31, 2001
Posts: 282
I want to create a page which has a header, display area and footer. I want the header and footer to always be displayed at the top and bottom of the page, respectively. I don't want the main browser page to overflow. I want the display area between the header and footer to overflow if required. I have explored trying to do this with DIV and TABLE/TR tags but both seem to suffer from same two problems:

If, for example, I set the height percentages for 3 DIVs to 5%, 90%, and 5%;

1) The DIVs do NOT expand to fill the available screen. The display area DIV set to 90% will display only as much as required to display the content in the display area; the footer is often displayed in the middle of the page.

2) When the content overflows the display area DIV, it seems I can only get scroll bars to display if I specify height (and width) in pixels. If I attempt to use percentages, the whole page overflows and the footer is pushed down so that it cannot be seen by the user.

I would prefer to use height percentages as I would like this application to be cross-browser compatible but this does not seem to work. I could calculate the display area height using screen.height or perhaps screen.availHeight but I'm hoping I don't have to do this as this would cause other issues, e.g. how to handle resizing of the browser window by the user.

Is there a solution to this problem? Is there a way to use height percentages for what I am attempting to do?
Joel Jorgensen

Joined: Oct 13, 2006
Posts: 22
This worked for me--the upper 5% of the page was blue, the middle 90% was yellow, and the bottom 5% was purple. It's actually a little too big for some reason, but if you just tweak the values down one or two percent in each case that should take care of it. (I tested in FireFox and IE 6)

Go is to the fountain.
Jay Damon
Ranch Hand

Joined: Jul 31, 2001
Posts: 282
Thanks Joel. That works and fairly well across browsers. IE and Mozilla look exactly like I want and Opera looks reasonably good also.
Liu Zhixiang
Ranch Hand

Joined: Aug 12, 2006
Posts: 32
add "overflow:auto;" to #main

I Think Therefore I Am
Jay Damon
Ranch Hand

Joined: Jul 31, 2001
Posts: 282
FYI, I found that Opera (version 7.10 at least) will sometimes hang when overflow:auto is specified for the main display area. My solution was to set overflow:hidden in my style sheet and execute a JavaScript function on page load that checks for Opera. If Opera, always set overflow:scroll; otherwise set overflow:auto.
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
Still with that Opera 7! Other things to play with

might want to set the margin and padding of the divs to 0

I agree. Here's the link:
subject: Controlling DIV and/or TR height
It's not a secret anymore!