www.webdeveloper.com
Results 1 to 10 of 10

Thread: td height 100%: possible?

  1. #1
    Join Date
    Jul 2006
    Posts
    373

    td height 100%: possible?

    Hi,

    i have a code like this

    HTML, BODY { margin:0;padding:0;height: 100%; }
    TABLE { height: 100%; }

    .row1 { height: 100px; }
    .row2 { height: 30px; }
    .row3 { height: 100%; }
    .row4 { height: 20px; }
    DOCTYPE transitional

    <table>
    <tr class='row1'><td>Header</td></tr>
    <tr class='row2'><td>Menu</td></tr>
    <tr class='row3'><td>Content</td></tr>
    <tr class='row4'><td>Footer</td></tr>
    </table> [/HTML]

    what im trying to do is simple, a table that occupies the entire screen, header has to touch the top edge of the screen whilst the footer has to touch the very bottom. Content cell should auto size and stretch enough to fill the remaining space, but i cant get it to do it, the footer cell does it instead. How can i work out this problem? i tried by using height at 100% for the content row but it wont work in explorer. Any hints please?

    Thanks.

  2. #2
    Join Date
    May 2011
    Posts
    85
    Try not to use tables for layouts, DIVs written with CSS offer far more flexibility than tables.
    Start your website today at LiveCity

  3. #3
    Join Date
    Jul 2006
    Posts
    373
    Well, thanks for the advice but its a little too late for that since all the pages of my site have tables. Does it mean i cant achieve what im trying as long as im using tables?

  4. #4
    Join Date
    May 2011
    Posts
    85
    I recall that tables are problematic in this regard. Perhaps this would be useful in that case.
    Start your website today at LiveCity

  5. #5
    Join Date
    Jul 2006
    Posts
    373
    Actually, i have already come across that site before coming here. You can see i used their advice in my code, but vertical alignment is not what im trying to achieve, but getting a particular cell to be the one that stretches and fills the remaining space, in this case bing row3 but what i get is footer cell being the one that stretches, which is odd considering im giving it a defined height (20px). Im sure there is a way around this, but i have tried many things and none of them work.


    Thanks.

  6. #6
    Join Date
    May 2011
    Posts
    85
    Sadly, from what I've found online, it seems that tables don't work that way, 'out of the box'. I've stumbled upon a solution that uses jQuery - so apparently there's need for an external script to get it working (which supports the notion that there's no such option in coding).

    I believe that if possible, you should invest time in a non-tabular layout - it would be easier to maintain both now and in the future.
    Start your website today at LiveCity

  7. #7
    Join Date
    Jul 2006
    Posts
    373
    Thanks again, but that code is for the entire table, not for a single cell which is my goal. I already managed to have the table occupy the 100&#37; of the height of the page, the problem is the proportions of the cells. Rows 1, 2 and 4 are supposed to have a defined height, while row 3 should auto size accordingly depending on the page size, but row 3 does it instead.

  8. #8
    Join Date
    May 2010
    Posts
    93
    I would strongly use div tags like LiveCity said...they are WAYY easier to use then tables I only use tables for forms...also you could probably remake the whole site in div's before you found that problem with the cell you are talking about tables and &#37; do not play very nice together Ive heard of a hack to help fix this but I dont think it worked in IE

  9. #9
    Join Date
    May 2010
    Posts
    93
    I would strongly use div tags like LiveCity said...they are WAYY easier to use then tables I only use tables for forms...also you could probably remake the whole site in div's before you found that problem with the cell you are talking about tables and % do not play very nice together Ive heard of a hack to help fix this but I dont think it worked in IE

  10. #10
    Join Date
    Jul 2006
    Posts
    373
    I already fixed it. Seems like i had some misplaced cells after all. Thanks anyway.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles