Databases
StackOverflow2013
Postsdbo
POdiv height set with max-height => make contained div takes full height using css
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdiv height set with max-height => make contained div takes full height using css
    primarykey
    data
    text
    <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>&lt;div id="container"&gt; &lt;div id="A"&gt; &lt;div id="B"&gt; &lt;div id="C"&gt; &lt;div id="D"&gt; &lt;div id="D1"&gt;D1&lt;/div&gt; &lt;div id="D2"&gt; D2 - very long content &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Thanks!!!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USGabriel Caron L'Écuyer
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COThe max-height CSS property seems to work perfectly fine [here](http://jsfiddle.net/pmnc9/3/) when set to e.g. 60%. True, you can't see everything that is in div D because you have div C's overflow set to hidden, and div D is actually taller than its containing div, but that's only because its content is taller, you can't make its content smaller with CSS. Are you looking for `overflow-y: visible`?
      singulars
      1. POdiv height set with max-height => make contained div takes full height using css
      1. USMathijs Flietstra
    2. COThe max-height property works perfectly to set the height of div C. My problem is that when I use it, the height of div D (set with property height: 100%) does not follow. Please see the counter-example I added in my question. Thks
      singulars
      1. POdiv height set with max-height => make contained div takes full height using css
      1. USGabriel Caron L'Écuyer
    3. COI believe I have found the source of the problem (but not the solution). The div C with max-height set needs to adjust to the size of it's content (div D), but the size of the div D is dependant on the size of it's parent (div C). Therefore, there is a problem. This problem does not occur by using the height property for div C. Any solution is still welcome!!!
      singulars
      1. POdiv height set with max-height => make contained div takes full height using css
      1. USGabriel Caron L'Écuyer
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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