Dynamic Height Issue

C

charlie_82

Expert Member
Joined
Dec 11, 2007
Messages
2,993
Reaction score
1
Location
Johannesburg
Hi Guys,

I have the following layout on my site:
A table with 1 column & 3 rows.
The table height is set to 100% (removing the doc type allows for this)
I have a static height for the first row (this is the header)
I also have a static height for the last row (this is the footer)

The middle row needs to fluctuate in height to accomodate various screen resolutions.

So here's my problem, the middle holds the content and if there's a lot of it, the last row just gets pushed down to accomodate the text. I need the full table to be visable at all times on all resolutions.

I'm trying to get the middle row to have a vertical scrollbar but I'm just not winning. Tried inserting a div in this row to help but because there's no height, it won't work either.

Any suggestions?
 
Last edited:
Meh...havent touched tables in yars so excuse my general comments :)

an iFrame would have the vertical scrollbar sorted? The frameset would have a set height,aswell as the table rows. Then your iframe would be adjusted to fit in no matter how you push it in there ;)
 
No iframes! NO!

What you can do, is put a "container" DIV in the TD of the middle row, and set the style attribute as follows:

height:100%;
width:100%;
overflow:auto; <---- this would allow for any overflowing content to scroll.

Hope it helps.

EDIT: Just tested it and it seems to work. Very primitive example as follows:

Code: 
<table height=100% width=100% cellpadding=5 cellspacing=0>
  <tr>
    <td height="50px" style="border:solid 1px black; background-color:gray;">Header</td></tr>
  <tr>
   <td style="border:solid 1px black; background-color:white;">
    <div style="height:100%; width:100%; overflow:auto">Expandable body</div>
   </td>
  </tr>
  <tr>
    <td height="50px" style="border:solid 1px black; background-color:gray;">Footer</td></tr>
</table>
 
Last edited:
FarligOpptreden said:
No iframes! NO!

What you can do, is put a "container" DIV in the TD of the middle row, and set the style attribute as follows:

height:100%;
width:100%;
overflow:auto; <---- this would allow for any overflowing content to scroll.

Hope it helps.

EDIT: Just tested it and it seems to work. Very primitive example as follows:

Code: 
<table height=100% width=100% cellpadding=5 cellspacing=0>
  <tr>
    <td height="50px" style="border:solid 1px black; background-color:gray;">Header</td></tr>
  <tr>
   <td style="border:solid 1px black; background-color:white;">
    <div style="height:100%; width:100%; overflow:auto">Expandable body</div>
   </td>
  </tr>
  <tr>
    <td height="50px" style="border:solid 1px black; background-color:gray;">Footer</td></tr>
</table>
Click to expand...

+1 for this solution
 
LOL I wasn't too keen on the iFrame either.
I've tried the container div before as well... if you increase the content in the div the footer still gets pushed down in Firefox :(
Is there a hack for this?
 
I see what you mean. Firefox is indeed not heeding the "height:100%" of the DIV. You need a fixed height with "overflow:auto" for Firefox (and Chrome, it seems). Bugger.
 
Ok after some playing around I got a really ugly fix for this...

Code: 
.content_text
{
    width:780px;
    overflow:auto;
    top:170px;
    bottom:106px;
    position:fixed;
}

this works great for Firefox but IE doesn't put in any scrollbars... So the hack for that is:

Code: 
    <!--[if IE]>
    <style type="text/css">
    
        .content_text
        {
            height:100%;
        }
    
    </style>
    <![endif]-->
 
charlie_82 said:
Ok after some playing around I got a really ugly fix for this...

Code: 
.content_text
{
    width:780px;
    overflow:auto;
    top:170px;
    bottom:106px;
    position:fixed;
}

this works great for Firefox but IE doesn't put in any scrollbars... So the hack for that is:

Code: 
    <!--[if IE]>
    <style type="text/css">
    
        .content_text
        {
            height:100%;
        }
    
    </style>
    <![endif]-->
Click to expand...


Why only a width of 780px? What about different resolutions?
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X