StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POdiv height set with max-height => make contained div takes full height using css
text
Body
copied!<p>I have a div C which <code>height</code> is set up using <code>max-height</code>. This div contains a div D.</p> <p>I want the contained div D to have the exact same height (and not more) than the containing div C.</p> <p>If I use the <code>height</code> property for div C, like <a href="http://jsfiddle.net/vGqmC/4/" rel="nofollow noreferrer">here</a></p> <ul> <li>the height of the div C is set up using <strong><code>height: 90%</code></strong></li> <li>the height of div D is set up using <code>height: 100%</code></li> <li>Then, Everything works fine, and the height of div D equals the height of div C</li> </ul> <p>If I use the <code>max-height</code> property for div C, like <a href="http://jsfiddle.net/8FyJF/3/" rel="nofollow noreferrer">here</a></p> <ul> <li>the height of the div C is set up using <strong><code>max-height: 90%</code></strong> </li> <li>the height of div D is set up using <code>height: 100%</code></li> <li>Then, the height of div D is not equals to the height of div C (a lot bigger since the content inside it is very long). In the fiddle, it looks good, but if you inspect div D, you will see it's a lot bigger.</li> </ul> <p>But I need to use the <code>max-height</code> css property, how can I set up the height of div D to be equals to the one of div C only with css?</p> <pre><code><div id="container"> <div id="A"> <div id="B"> <div id="C"> <div id="D"> <div id="D1">D1</div> <div id="D2"> D2 - very long content </div> </div> </div> </div> </div> </div> </code></pre> <p>Thanks!!!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload