5

How can I scale a div to 100% height and width inside of another element? In my case a sourrounding td. Since I'm a plugin I can not control the other HTML on the page. Here is my HTML:

<body style="height:100%;">
  <table width="600px" height="400px" border="1">
    <tr>
      <td style="background-color:silver;">Cell 1</td>

      <td style="background-color:silver;">
    <div style="height:100%; background-color:yellow;">
      <div style="min-height:100%; height:100%; background-color:red;">
        Cell 2
      </div>
    </div>
      </td>
    </tr>
  </table>
</body>

So, the Cell 2 div should be maximized. Is there a cross browser way to do this? Why is this so complicated?

mzehrer
  • 186
  • 1
  • 1
  • 7
  • what's wrong with the code above??? just opened it up in FF3 and IE6/7, and the RED div takes up the entire cell. – roman m Feb 21 '09 at 19:10

3 Answers3

5

Look at this stack overflow question as well ... after reviewing the top rated answer in that question, it looks like you have to set the height of the container to 100% and "min-height, height" of a child element to 100%.

Go to this website for more info - the HTML below is stripped-down version of the website

<div style="height:100%;">
  <div style="min-height:100%; height:100%; background-color:red;">  
    put your content here 
  </div> 
</div>
Community
  • 1
  • 1
roman m
  • 26,012
  • 31
  • 101
  • 133
2

Using javascript / jquery you can easily get the height of the parent element and resize your div accordingly.

However, as the div is located in a table cell, the width is not fixed as the cell would expand and contract according to the contents of the other cells in the table. So there really is no correct width, the cell will adapt itself according to the contents of all cells.

By the way, your height problem would be easily solved setting it to 400px, but I guess the shown table structure is just an example (1 row, 400px height...).

jeroen
  • 91,079
  • 21
  • 114
  • 132
  • I thought that this can be solved using HTML/CSS alone. And yes, the 400px are just for example. – mzehrer Feb 21 '09 at 15:57
  • Like I said, there is no correct answer because the height and width of table cells change automatically, so I don´t think that a html/css solution exists. – jeroen Feb 21 '09 at 17:23
1

Why bothing having a div within a div if its going to be 100% of the height and the width? Is there no other way of just using the containing div for your purpose?

It probably isnt working because height fails unless the containg element has some definite height applied to it.

Sam Becker
  • 19,231
  • 14
  • 60
  • 80