Menu
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?
237
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
For proportional resizing purposes, it makes matters extremely simple: Define the width of an element as a percentage (eg: 100%) of the parent's width, then define the element's padding-top (or -bottom) as a percentage so that the height is the aspect ratio you need. And that's it!
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
