How Can I Scale A Div To 100% Height And Width Inside Of Another Element

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

Solution 1:

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> 

Solution 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...).

Solution 3:

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.