A Way To Stretch Only The BOTTOM Table Cell To Fill 100% Page Height?

Trang chủ » Html Table Row Height Stretch » A Way To Stretch Only The BOTTOM Table Cell To Fill 100% Page Height?

Có thể bạn quan tâm

Toggle navigation
  • Dashboard
    • Dashboard Tracker
    • Add / Edit My Forums
    • System Announcements
  • Discussion
    • Active Thread Feed
    • Top Threads Today
    • Top Threads This Week
    • Top Threads Library
    • Go!
    • View All
    • Login
    • Logout

  1. Home
  2. Forums Index
  3. Browser Side / HTML 10:08 am Jul 7, 2024

Forum Moderators: open

Message Too Old, No Replies

a way to stretch only the BOTTOM table cell to fill 100% page height?

deepseacreatures

Msg#:3447100 7:32 am on Sep 11, 2007 (gmt 0) 10+ Year Member I'm trying to get a table to fill 100% of my page height. It does this with a 100% height attribute in CSS, but it's a 3-row table and so what this does when it stretches it out is that it spreads all of my content apart across the height of the page. I just want it to extend the bottom cell of my table to reach that 100% height (there's a background image). Any way to do this without rewriting the whole thing in CSS from scratch?

Thanks.

Marshall

Msg#:3447165 9:35 am on Sep 11, 2007 (gmt 0) WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month Can you post relevant CSS and HTML?

Marshall

Xapti

Msg#:3447432 2:55 pm on Sep 11, 2007 (gmt 0) WebmasterWorld Senior Member 10+ Year Member Sounds simple to me. Keep your height:100% on your table, and specifically set height of the top 2 rows, so that they take up whatever space you want it to, and have the 3rd take up the rest.

Also contemplate on whether you really even need to use tables, over just using styled divs.

puremetal

Msg#:3447953 10:25 pm on Sep 11, 2007 (gmt 0) 10+ Year Member Xapti, it didn't seem to work when i tried finding a solution this afternoon.

i tried this:

<table width="100px" height="100%" cellspacing="0"> <tr> <td height="20ox" bgcolor="#3333FF">cell 1 </td> </tr> <tr> <td height="20px" bgcolor="#990066">cell 2 </td> </tr> <tr> <td height="100%" bgcolor="#CC3366">cell 3 </td> </tr> </table>

Dreamweaver seems to think it works, but it doesn't in browsers.

penders

Msg#:3448404 12:17 pm on Sep 12, 2007 (gmt 0) WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month
height="20px"

When you specify a pixel value in an HTML attribute, don't use any units (ie. 'px', or even 'ox'?!). You only use 'px' in CSS.

Should read: height="20"

Although this might work in real world browsers, it is worth bearing in mind that it's not standards compliant, as there is no height attribute on TD elements, only on the TABLE element.

vincevincevince

Msg#:3448406 12:18 pm on Sep 12, 2007 (gmt 0) WebmasterWorld Senior Member 10+ Year Member style="height:100%!important" on the final <tr>. Space before the "!"

puremetal

Msg#:3449396 11:41 am on Sep 13, 2007 (gmt 0) 10+ Year Member lol the "ox" was a typo... thanks, good to know :-)

Xapti

Msg#:3449486 1:36 pm on Sep 13, 2007 (gmt 0) WebmasterWorld Senior Member 10+ Year Member I was quite sure heights coudln't be validly assigned to cable cells, but I thought browsers would render them anyways. Also deepseacreatures, I never said to give height:100% to the last TD. It should be left ot a default to take up the remaining space. 100% height would be conflicting, since the space available after the two first rows is already less than or equal to (depending on margins and borders) 100%-40px. You can try that, and if that doesn't work, just use divs, since that's what you should be using for layout; tables is for tabular data.

Div setup would be pretty straightforward... have a container div with height:100%, then two more divs with a fixed height inside the container div. The third section will just be the remainder of the container div.

Join The Conversation

  • Register For Free! - Become a Pro Member!
  • See forum categories - Enter the Forum

Moderators and Top Contributors

  • Moderator List | Top Contributors:This Week, This Month, Jun, May, Archive, Top 100 All Time, Top Voted Members

Hot Threads This Week

  • Meta Tag Not Working in Header
  • Google Admits To Overcharging For Adwords
  • Seeing googlebot hits from new IP range
  • Microsoft CEO of AI said Content on the Open Web Can Be Copied and Used for New Content
  • Friday Funnies
  • Is brand name in menu still necessary for SEO?
  • Decreased Participation numbers in Webmaster World
  • Cloudflare debuts one-click nuke of web-scraping AI bots
  • Bots Compose 42% of Overall Web Traffic; Nearly Two-Thirds Malicious
  • Direct domain to existing site
  1. Home
  2. Forums Index
  3. Browser Side / HTML 10:08 am Jul 7, 2024

Từ khóa » Html Table Row Height Stretch