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

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
• • View All
• • Login
  • Logout

1. Home
2. Forums Index
3. Browser Side / HTML 10:58 am Nov 29, 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) 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) Can you post relevant CSS and HTML?

Marshall

Xapti

Msg#:3447432 2:55 pm on Sep 11, 2007 (gmt 0) 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) 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)

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) style="height:100%!important" on the final <tr>. Space before the "!"

puremetal

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

Xapti

Msg#:3449486 1:36 pm on Sep 13, 2007 (gmt 0) 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, Oct, Sep, Archive, Top 100 All Time, Top Voted Members

Hot Threads This Week

• November 2024 Google Search Observations
• AdSense Earnings and Observations - November 2024
• ChatGPT, Google, Meta AI - high risk intended protection laws
• Report: U.S. Justice Department Official to Ask Google to Sell Off Chrome Browser
• 100,000 Traffic in 100 Days – Can We Pull It Off?
• Google Entities: Recognizing content creators
• Tik Tok is a major search engine for Gen Z
• Is it good to add a subfolder /forum/ for SEO?
• Fun backlink hack I’ve been using lately
• 403 for the ages

1. Home
2. Forums Index
3. Browser Side / HTML 10:58 am Nov 29, 2024