100% Min Height CSS Layout

height: 100% or min-height: 100% for html and body elements?

If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.

The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.

For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.

3 rows layout, with total min-height: 100%

have you given a try to set .middle height to 100% too ?

this way, the .middle <tr> will take as much place wich remains, others <tr> will expand according to their content.

http://jsfiddle.net/v73c4L7n/10/ (works in latest browsers .

updated CSS:

body, html {
    height: 100%;
    padding:0;
    margin:0;
}
.area {
    width: 300px;
    background-color: green;
    margin: 0px auto;
    min-height: 100%;
    height: 100%;
    padding:1px
}
.main {
    table-layout: fixed;
    border-collapse: collapse;
    background-color: red;
    height: 100%;
    width: 100%;
}
.main .middle > td {
    background-color: yellow;
    width: 100%;
}
.main tr:first-child, .main tr:last-child {
    height: 50px;
}
.main tr:first-child > td {
    width: 100%;
    background-color: rgba(0,0,255,0.5);
}
.main tr:last-child > td {
    width: 100%;
    background-color: rgba(0,0,255,0.5);
}
.middle {
    height:100%;
}

It worlks too with display:table and regular tag elements such as header, main and footer. http://jsfiddle.net/v73c4L7n/13/

Display:flex; makes things even easier : http://jsfiddle.net/v73c4L7n/14/

display:table is understood since IE8, flex since IE10 :(

How to make body take 100% min height and height as auto

body { min-height: 100vh; } is all you'll need.

3 rows layout, with total min-height: 100%

have you given a try to set .middle height to 100% too ?

this way, the .middle <tr> will take as much place wich remains, others <tr> will expand according to their content.

http://jsfiddle.net/v73c4L7n/10/ (works in latest browsers .

updated CSS:

body, html {
    height: 100%;
    padding:0;
    margin:0;
}
.area {
    width: 300px;
    background-color: green;
    margin: 0px auto;
    min-height: 100%;
    height: 100%;
    padding:1px
}
.main {
    table-layout: fixed;
    border-collapse: collapse;
    background-color: red;
    height: 100%;
    width: 100%;
}
.main .middle > td {
    background-color: yellow;
    width: 100%;
}
.main tr:first-child, .main tr:last-child {
    height: 50px;
}
.main tr:first-child > td {
    width: 100%;
    background-color: rgba(0,0,255,0.5);
}
.main tr:last-child > td {
    width: 100%;
    background-color: rgba(0,0,255,0.5);
}
.middle {
    height:100%;
}

It worlks too with display:table and regular tag elements such as header, main and footer. http://jsfiddle.net/v73c4L7n/13/

Display:flex; makes things even easier : http://jsfiddle.net/v73c4L7n/14/

display:table is understood since IE8, flex since IE10 :(

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>

.content {
  background-color: #ddd;
  padding: 10px;
  min-height: 100vh; /* add minimum height of 100% */
}