100% de la hauteur de l'enfant div parent envelopper div

Voici 2 Pure CSS solution

Sans pour autant fixer la hauteur (en-tête/pied de page) ou la largeur (colonne de gauche).

Je préfère la deuxième solution. (même quand il a moins de prise en charge du navigateur)

1 - à l'aide de CSS astuces

ceci est totalement responsive design et fonctionne bien avec tous les navigateurs (IE10, FF, Chrome, Safari, Opera, un navigateur mobile)

Travail Violon

HTML:

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper">
                    <div class="LeftMenu">
                    </div>
                    <div class="Content">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.LeftMenu
{
height: 100%;
float: left;
}
.Content
{
overflow: auto;
height: 100%;
}
/*For demonstration only*/
p
{    
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
text-align: center;
}
.Header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color:  #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}

2 - à l'aide de Flex

Cette disposition peut également être réalisé à l'aide de flex, mais l'actuelle prise en charge du navigateur est pur.
Voici un Travail Violon seulement FF,Chrome,IE10.

HTML: (plus simple)

<header>
</header>
<section class="Middle">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</section>
<footer>
</footer>

CSS:

*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
text-align: center;
}
body
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.Middle
{    
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Content
{   
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 0 0;
overflow: auto;
}
/*For demonstration only*/
p
{    
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color:  #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
footer
{
background-color: #b5a8b7;
}

OriginalL'auteur avrahamcool

Important va l'emporter sur d'autres attributs CSS et auto fera la div aussi grand qu'il faut pour s'adapter au contenu.

height: auto !important; 
height: 100%;

OriginalL'auteur Gavin

J'ai restructuré votre html un peu. Est que votre résultat souhaité?

jsfiddle

<div id="container">
<div id="wrap">
<div id="header">
header
</div>
<div id="body">
<div id="left">
left
</div>
<div id="right">
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>

css

html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#container {
height: 100%;
height: auto !important;
min-height: 100%;
}
#wrap {
overflow: auto;
padding-bottom: 16px;
}
#header {
height: 104px;
background:#d5a1b3;
border-bottom: 1px solid #000;
}
#body {
overflow: hidden;
height: 100%;
}
#right {
margin: 0px 0px 0px 220px;
background:#FFF;
}
#left {
width: 219px;
float: left;
background:#a2d025;
}
#footer {
background:#ed653a;
border-top: 1px solid #000;
position: relative;
height: 20px;
margin-top: -21px;
clear: both;
}
#footer p {
margin: 0px;
}

OriginalL'auteur Sebsemillia