ansaurus

Question

How can I scale a div to 100% height and width inside of another element

Answer 1

+1 A:

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.

Sam152 2009-02-21 10:48:24

I need the div for adding a google map to it.

mzehrer 2009-02-21 11:38:51

Cant you just put in the google map and let it fill the original div?

Sam152 2009-02-21 13:39:37

Answer 2

+3 A:

Look at this SO 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>

roman m 2009-02-21 10:49:57

This doesn't work for me, see my edited example in the question.

mzehrer 2009-02-21 15:11:03

?? your table is 400px high, the div won't go past that

roman m 2009-02-21 18:57:07

Answer 3

+2 A:

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 2009-02-21 15:48:13

I thought that this can be solved using HTML/CSS alone. And yes, the 400px are just for example.

mzehrer 2009-02-21 15:57:02

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 2009-02-21 17:23:09

ansaurus

tags:

views:

answers:

How can I scale a div to 100% height and width inside of another element

related questions