Cell Height Problem

  • Digi Stylers
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: UK

Post 3+ Months Ago

This probably has a really simple answer but its bugging me. I have a table with 3 rows: Header, Nav bar, Main Content. The main content height has a background colour and is set to 100%. The problem is that the cell only stretches down as far as the content does (1 line of text and only 1 lines worth of background colour for that cell). How can i fix this and make the colour fill the rest of the page?

Regards,
Mark
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

If I understand you right, you want:
header: fixed height
navbar: fixed height
main body: stretching to the bottom of the screen?
If I'm right then you should be able to do it by setting the table height to 100%, set the height of title and navbar, but leave the height of the main cell as auto.

If that doesn't work, or I have the wrong idea then post back.
  • Digi Stylers
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: UK

Post 3+ Months Ago

At the moment I have:

Header: W: 100% H: 50
Nav Bar: W: 100% H: 16
Main Content: W: 100% H: 100%

All those cells are in a table with: W: 100% H: 100%

The main content has a blue background colour but it only shows like this: You put 1 line of text in it, theres one line of blue, you put 2 lines of text in it, theres 2 lines of blue, all the rest is white (the body bg colour)

Regards,
Mark
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

are you using attributes in tags or are you using css?

Post the actual code you are using.

I'll have a little play see what happens.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

try this, I've made it all horrible colors to show the split:

Code: [ Select ]
<table style='width:100%; height:100%'>
    <tr>
        <td style="height:50px; background-color:#ff0000">Title</td>
    </tr>
    <tr>
        <td style="height:50px; background-color:#00ff00">Nav bar</td>
    </tr>
    <tr>
        <td style="background-color:#0000ff">main</td>
    </tr>
</table>
  1. <table style='width:100%; height:100%'>
  2.     <tr>
  3.         <td style="height:50px; background-color:#ff0000">Title</td>
  4.     </tr>
  5.     <tr>
  6.         <td style="height:50px; background-color:#00ff00">Nav bar</td>
  7.     </tr>
  8.     <tr>
  9.         <td style="background-color:#0000ff">main</td>
  10.     </tr>
  11. </table>


basically I have:
-made the table 100% width and height
-set the height of the top two cells (not the width as they fill the table)
-left both the height and width of the main body auto

hope this helps, enjoy :)
  • Digi Stylers
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: UK

Post 3+ Months Ago

I tried that, same problem. If you view that in IE then the main cell shrinks right up to the text.

Regards,
Mark
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

I tested it in netscape and IE!! :?

Which version of IE are you using?

I am now rather confused....
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

I think you should set the bottom margin to zero like this:

Code: [ Select ]
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">



If that doesnt help try that with this:

Well you could try to set the main content height to a large number. for exapmle:
Code: [ Select ]
<table style='width:100%; height:100%'>
  <tr>
   <td style="height:50px; background-color:#ff0000">Title</td>
  </tr>
  <tr>
   <td style="height:50px; background-color:#00ff00">Nav bar</td>
  </tr>
  <tr>
   <td style="height:700px; background-color:#0000ff">main</td>
  </tr>
</table>
  1. <table style='width:100%; height:100%'>
  2.   <tr>
  3.    <td style="height:50px; background-color:#ff0000">Title</td>
  4.   </tr>
  5.   <tr>
  6.    <td style="height:50px; background-color:#00ff00">Nav bar</td>
  7.   </tr>
  8.   <tr>
  9.    <td style="height:700px; background-color:#0000ff">main</td>
  10.   </tr>
  11. </table>
  • Digi Stylers
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: UK

Post 3+ Months Ago

Thanks Hacker007, yours seems to work :)

Regards,
Mark
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

Well happy to help out on what i could. I am just helping people on the site becuase people on the site helped me. Glad you got your answer.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 78 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.