Win a copy of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) this week in the OCAJP forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

100% height does not work

 
salvin francis
Bartender
Posts: 1305
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I believe it will only work if the parent is assigned a height value.

Eric
 
Ankit Garg
Sheriff
Posts: 9527
32
Android Google Web Toolkit Hibernate IntelliJ IDE Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Set the height of the body...
 
Sean Clark
Rancher
Posts: 377
Android Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey,
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.

Sean
 
salvin francis
Bartender
Posts: 1305
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Bartender
Posts: 1305
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Rancher
Posts: 377
Android Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


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

Sean
 
salvin francis
Bartender
Posts: 1305
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.


 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic