Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Controlling DIV and/or TR height

 
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?
 
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.
 
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.
 
author
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
 
He baked a muffin that stole my car! And this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic