• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Controlling DIV and/or TR height

 
Jay Damon
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 1.5.0.9 and IE 6)

 
Jay Damon
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 32
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
add "overflow:auto;" to #main
 
Jay Damon
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Still with that Opera 7! Other things to play with

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

Eric
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic