Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You want to specify both, CSS <code>height</code> is not the same as <code>min-height</code>. You want to specify both <code>height</code> and <code>min-height</code>.</p> <ul> <li><p><code>height</code> = When used as a <code>%</code>, this is a percent of the window height</p></li> <li><p><code>min-height</code> = as you drag the window smaller, the DIV with a <code>%</code> <code>height</code> will continue to reduce until it hits the <code>min-height</code></p></li> <li><p><code>max-height</code> = as you drag the window larger, the DIV with a <code>%</code> <code>height</code> will continue to increase until it hits the <code>max-height</code></p></li> </ul> <p><a href="http://jsfiddle.net/gpeKW/2/" rel="nofollow">http://jsfiddle.net/gpeKW/2/</a> I've added a sample here with borders.</p> <p>Slight change to the answer from your comment, you are pretty much correct from your original CSS.</p> <p>The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a <code>style</code> attribute to the first inner <code>class</code>.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Untitled Page&lt;/title&gt; &lt;style type="text/css"&gt; .wrapper { background-color: #000; min-height:100px; } .inner { display: inline-block; background-color: #777; height: 100%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="wrapper"&gt; &lt;div class="inner" style="height:200px"&gt;test&lt;/div&gt; &lt;div class="inner"&gt;Peace&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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