jQuery in Action, 3rd edition
The moose likes HTML, CSS and JavaScript and the fly likes 100% height does not work Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "100% height does not work" Watch "100% height does not work" New topic

100% height does not work

salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

This is a part of a huge code that i managed to create in a scratchpad.

I need a component to stretch up to 100% in height of its parent's space.

what i have attempted so far :

To my knowledge, the stretcher div should have taken up the entire space, it does not, at least not in ie6 and Firefox 3 and chrome

The table is a part of a fluid layout so it does not have any widths and heights mentioned.

I have also attempted to use a nested table, it does not get 100% height too.

My Website: [Salvin.in] Cool your mind:[Salvin.in/painting] My Sally:[Salvin.in/sally]
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
I believe it will only work if the parent is assigned a height value.

Ankit Garg

Joined: Aug 03, 2008
Posts: 9435

Set the height of the body...

SCJP 6 | SCWCD 5 | Javaranch SCJP FAQ | SCWCD Links
Sean Clark

Joined: Jul 15, 2009
Posts: 377

Using tables for any use other than to display tabular data is considered by many to be bad practise.
Check why tables are not so good for layout

In your example you will need to give height attributes to all the parent elements td->tr->table->body.


I love this place!
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

is there a way for me to do this without height guys ?

maybe not using a table ?

basically a 3x3 cell

My Actual requirement:
the left and right panels contains

two elements:
element 1 is of fixed height , element2 occupies remainder of the cell

the content [c] can be of any width or height
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

I do use Divs with floats, but sometimes its really convinient to use tables especially when two elements appear horizontally
else i would also need a container to hold those two divs and ensure they do not overlap or wrap down.

But i do not want to start a debate here on whether tables are better or divs
Sean Clark

Joined: Jul 15, 2009
Posts: 377

Took a couple of mins to write out, I don't see why it is so much easier to use tables?!

salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

its actually:

plus couple of Css to add floats + ensuring that divs are properly aligned, not overlapping,overflowing (IE6,IE7,FF3)

All that above vs:

Well, frankly i too do not use tables that much, but the very fact that they do not break the structure so easily lures me towards them.
1. One cell does not overlap the other.
2. we do not have to provide heights/widths
3. They wrap pretty well even when page is resized.
4. Thier cell's alignment/positioning does not depend on thier parent's aligning or positioning.
5. They are predictable over large data/ short data.
6. No browser hacks required !!!

trying making a rounded box using Divs (all rounded corners transparent) and check all the hacks you need to overcome to make it work
and when its done, take a look at the output and take a guess at how many tags you have placed just for designing which have no relation with content.

Actually the above question was based on one such senario. i did acomplish it in divs but it was so buggy that i had to come back to using tables.
if there was no need for the two right and left vertical cells, i would have gone for the table layout itself.

I agree. Here's the link: http://aspose.com/file-tools
subject: 100% height does not work
It's not a secret anymore!