Height: 100% Inside Min-Height: 100%

Child inside parent with min-height: 100% not inheriting height

This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

Apparently Firefox is affected too (can't test in IE at the moment)

Possible workaround:

add position:relative to #containment
add position:absolute to #containment-shadow-left

The bug doesn't show when the inner element has absolute positioning.

See http://jsfiddle.net/xrebB/

Edit on April 10, 2014

Since I'm currently working on a project for which I really need parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

First: I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.

If I put a min-height on my container, I'm not explicitly specifying its height - so my element should get an auto height. And that's exactly what Webkit - and all other browsers - do.

Second, the workaround I found:

If I set my container element to display:table with height:inherit it acts exactly the same way as if I'd give it a min-height of 100%. And - more importantly - if I set the child element to display:table-cell it will perfectly inherit the height of the container element - whether it's 100% or more.

Full CSS:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

Height: 100% inside min-height: 100%

I usually use:

position: absolute;
height: 100%;

And on the outer div:

position: relative;
min-height: 100%;

Using static positioning doesn't work, because the browser needs the outer div's height to calculate the inner div's height. But it doesn't know the outer div's height until it has calculated the inner div's...

However, my solution can't be used in many situations. Maybe someone else has a better one.

Div height: 100% not working with body min-height: 100vh

The answer is simple as percentage min-height is calculated based on parent container's height value not min-height.

* {margin:0;}

body {
  background: gray;
  height: 100vh; /* look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100%;  /* look here */
}

<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

Set min-height to 100% as a child of a container with a min-height of 100%

Sure, just add height:100% and overflow:auto to the #body-container:

html,

body {

  height: 100%;

  background-color: black;

}

#body-container {

  height: 100%;

  min-height: 100%;

  overflow:auto;

  background-color: red;

}

.bg-container {

  width: 920px;

  margin: 0 auto;

  background-color: blue;

  min-height: 100%;

}

<div id="body-container">

  <div class="bg-container">

    foo bar

  </div>

</div>

Child elements of min-height parent is not respecting 100% height of parent

Changed only a couple things. Don't forget the default is display: block

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container > .header, .container > .footer {
  height: 10vh;
  width: 100%;
}

.container .header {
  background-color: rgb(239, 68, 68);
}

.container .footer {
  background-color: rgb(59, 130, 246);
}

.container .content {
  /*Line added since the default is block it wasn't working with 
   flex grow*/
  display: flex;
  flex-grow: 1;
}

.container .grid {
  /*Now that your content "grows" you can inherit its height*/
  height: inherit;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.container .grid > div {
  height: 100%;
  width: 100%;
}

.container .grid .left, .container .grid .right {
  height: 100%;
  width: 100%;
}

.container .grid .left {
  background: rgb(16,185,129);
}

.container .grid .right {
  background: rgb(139,92,246);
}

<div class="container">
  <div class="header"></div>
  <div class="content">
    <div class="grid">
      <div>
        <div class="left">
        </div>
      </div>
      <div>
        <div class="right">
        </div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</div>

height:100% VS min-height:100%

Here's an explanation from the W3C (link):

The following algorithm describes how the two properties [min-height and max-height] influence the used value of the 'height' property:

The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.

If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.

If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

To summarize: Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.

For the specific case you give, specifying height:100% makes the height of the element equal to the height of the containing block. (However this could potentially be overruled, for instance if you also specified max-height:50%.) Specifying min-height:100% means that if the computed height is less than 100%, in fact even if you explicitly specified a height less than 100%, it is treated as if you said height:100%. Note that one key difference is that max-height can overrule height but cannot overrule min-height (because max-height is considered after height but before min-height according to the W3C recommendation as quoted above).

css height~min-height:100% not work

You can use vh units. 100vh is 100% of the viewport height. This doesn't require setting the parents' heights and has good support - all browsers and ie >= 9.

body {  

    font-family: Helvetica, Arial, sans-serif;

}

.divHeader a {

    text-decoration:none;

    color:#000;

    font-weight:800;

}

.wrapper {

    padding:0;

    margin:0 auto;

    min-height:100vh;

    width:100%;

}

.divHeader, .divBody, .divFooter {

    padding:5px;

}

.divHeader {

    height:15%;

    clear:both;

    display:block;

    background-color:#CFCFC4;

    width:100%;

    border-bottom: 1px dotted gray;

}

.divBody {

    height:80%;

    width:100%;

    display:block;

    padding:0;

    margin:0 auto;

    clear:both;

    min-height:80%;

    height:auto;

}

.divFooter {

    height:5%;

    width:100%;

    display:block;

    margin:0 auto;

    padding:0;

    clear:both;

}

.divContentLeft {

    margin:0 auto;

    float:left;

    display:inline-block;

    position:relative;

}

.divContainer {

    clear:both;

    display:inline-block;

}

.divContentRow {

    width:100%;

    display:inline-block;

}

.divContentHeader {

    width:100%;

    height:20%;

    border-radius:25px;

    display:inline-block;

    margin:10px;

    padding:5px;

}

.divContentDetail {

    width:100%;

    height:80%;

    border-radius:25px;

    display:inline-block;

    margin:10px;

    padding:5px;

}

.ui-widget-header {

    background:#b39eb5;

}

.divContentTextbox {

    float:left;

    margin-left:15px;

    display:inline-block;

}

.divContentLabel {

    float:left;

    margin-left:15px;

}

* {

    padding: 0;

    margin-left: 0;

    margin-top: 0;

    margin-bottom: 0;

}

.divMenuBarBlock {

    float:left;

    width:100%;

    height:100%;

}

.menu-bar {

    float:left;

    min-height:100%;

    width:100%;

    height:100%;

    background: #CFCFC4;

}

.menu-bar a{

    display:block;

    padding: 10px 10px 10px 10px;

    text-decoration:none;

    border-bottom: 1px dotted gray;

    color: #000;

    letter-spacing: .002em;

    text-transform: uppercase;

    font-family:Helvetica, Arial, sans-serif;

    font-style:normal;

    font-size:medium;

}

.menu-bar li{

    list-style:none;

}

.menu-bar ul li ul li:hover {

    background:gray;

}

.menu-bar-ul ul {

    display:none;

}

.no-sub:hover {

    background:gray;

}

.sub-arrow {

    margin-left:15px;

}

.menu-bar-ul li.click ul {

    display:block;

}

.menu-bar .sub-arrow:after {

    content:'\203A';

    float:right;

    margin-right:10px;

    transform:rotate(90deg);

    -webkit-transform:rotate(90deg);

    -moz-transform:rotate(90deg);

}

.menu-bar li.click .sub-arrow:after {

    content: '\2039';

}

.menu-bar-ul ul a:before {

    content:'\203A';

    margin-right:10px;

}

<div class="wrapper">

  <div class="divHeader">

    <div class="divContainer">

      <div class="divContentLeft">

        <a href="Dashboard.aspx"><img src="../images/logo.png" /></a>

      </div>

      <div class="divContentLeft">

        <div class="divContentRow"></div>

        <div class="divContentRow"></div>

        <div class="divContentRow">

          <div class="divContentLeft">

            <a href="Dashboard.aspx"><span>Some Title Here</span></a>

          </div>

        </div>

        <div class="divContentRow">

          <div class="divContentLeft">

            <a href="#"><img src="../images/menu_icon.png" height="20px" width="20px" onclick="" /></a>

          </div>

        </div>

      </div>

    </div>

  </div>

  <div class="divBody">

    <div class="divContentLeft" style="min-height:100%; height:100%;">

      <div class="menu-bar">

        <ul class="menu-bar-ul" runat="server" id="divMenuBar">

        </ul>

      </div>

    </div>

    <div class="divContentLeft">

      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

      </asp:ContentPlaceHolder>

    </div>

  </div>

  <div class="divFooter">

  </div>

</div>