Table height: 100%

[Mikeish]

Simply put: I want a table to go all the way down to the bottom of the page until I push it farther with content. The catch...

Row 1: 51px
Row 2: 40px
Row 3: Stretchy
Row 4: 20px
Row 5: 40px

I currently have height: 100% for <table> (using CSS) and then height: for the first cell in each row except for row 3.

Works fine in FF but in IE it stretches is out... I think www.themitech.com/IHS/2/index.html shows what I am talking about.

Any suggestions?
THANKS!
--Mike

[FC Jamison]

It looks good in IE7 on my laptop.

[Mikeish]

Are you serious? www.themitech.com/IHS/2/index.html does?

Read this to see if it is what you see:

at www.themitech.com/IHS/2/index.html you can see it with borders=1 that everything is stretched.

The top should only be as high as Indianola High School logo (which is like 51px or something like that)

The second should have very little white space (like maybe 5px worth) after the gray bar and it's gradient

The Third SHOULD stretch, which is sort of does.

The fourth should only be as high as the gradients but instead it has more yellow color than it should (Rightfully so since I made the BGCOLOR on it yellow)

The fifth should be only as high as the ICSD logo is at the bottom.

In my code I have all of these at the exact pixels that they should be, and Firefox listens to me even if it isn't ethical but IE does not. If I could get this part to work then I'd be in business.

For the moment i have put a background color of the entire page as yellow and taken out the height: 100% so that it bunches up. It doesn't look the greatest but I figure if I have to live with it maybe i can just make sure each page has enough content. You can see what I have done CURRENTLY at http://www.indianola.k12.ia.us/high/new/index.html

I would prefer to get this height figured out.. I mean extremely prefer it, but I dont' have time to deal with it just like I didn't have time to waste getting the CSS to work so I didn't use any tables at all... Hopefully someone knows a good idea, but if not... tough luck.

Thanks!
--Mike

[roryt]

Have you tried using nested tables and setting the height in them? What your are doing is going to cause a problem because 100% height doesn't really work. You have quite a simple layout so I would say scrap the tables and try and learn some decent coding.

[MidiMagic]

100 percent of WHAT???? I don't know! I'm just a browser. But he's on third.

Web pages don't come in standard heights, and neither do browser windows. Computers with different screen resolutions will have different maximum visible heights (in pixels), and the browser can't know what you mean by 100 percent.

Remember that some LCD screens have lower maximum resolutions than the latest CRTs.

If you want a certain display heignt, you have to set it in inches or centimeters.

[roryt]

Your say that there is no way for it to know the height, however it does know the width but I suppose the fact is that it doesn't.

I would normally set heights in pixels if I was going to set one not inches or centimetres?

[MidiMagic]

Inches and centimeters DO work across different displays, making the final display the same height on any screen. The resolution of the rendering changes to make the display fit the screen.

Pixels makes the final display take up different portions of the screen with different screen settings.

The reason there is no "100 percent" is that some older laptop computers have a scroll function (independent of the browser scroll bar) which allows the screen to have a larger total height than the displayed portion.

[roryt]

The reason there is no "100 percent" is that some older laptop computers have a scroll function (independent of the browser scroll bar) which allows the screen to have a larger total height than the displayed portion.

I don't understand, could you explain that again and maybe post a screenshot?

[MidiMagic]

.
.
.
.
.
.
That would be hard to do, because I no longer have the laptop.

And a screenshot wouldn't have worked, because the screenshot showed the whole "displayed page", but the laptop display showed only a portion of it at any time. It had buttons to roll the display up and down to see the whole displayed page. They are not the standard buttons for the arrow keys.

The real problem is that HTML doesn't really have a page height setting. You would have to set a container holding the table to have a page height.

[MattEvans]

that's not the reason there's no 100% height.

100% height has existed. it means all of the height in which information is displayed, or in terms of width, 100% of the width in which information is displayed.

some browsers have picked that up as being 100% of the visible window, others have picked it up as being 100% of the size of all of the objects on a page.

Percentages absolutely do not need units, just a qualifier; i.e. 'height'. 100% of the height means the same in pixels, centemeters, or feet. That's part of the usefulness of percentages.

100% of the window is alot more useful than 100% of the height of objects in the window. If you've ever worked in application GUI design, it's much more important to be able to scale an interface for a display without needing to know the size of the space that you have available than to how much of that space you are currently using. Knowing the resolution doesn't help much atall because my browser window might be one tile in a 4 x 4 layout on my desktop.

The best (perhaps only) way to scale to the size of the browser window in later standards (XHTML) is to use hacky Javascript. Heck; Firefox thinks that in XHTML, a body background color should only be aplied to areas with content or when you have a set 'body height' >_< That's being pedantic to the extreme.

[MidiMagic]

I researched this a little more.

height="100%"
or
height: 100%;

This means 100 percent of the height of the HTML element which CONTAINS the element with the height attribute.

So if you have the element you put the 100% height on inside a block element, it will take the entire height of the block element. It will fill the space inside the block element vertically.

But the body element has no defined height. So if it body the only container, the object with the height attribute will become the height of the entire document, no matter how tall it is.