Comment faire pour que l'élément au milieu remplisse la hauteur restante - Support IE8?

Question

Il y a des questions similaires, et des réponses en utilisant flexbox (css3), ou table (travail pour le dernier élément seulement).

Mais comment puis-je faire en sorte que l'élément dans le remplissage du milieu reste height, en utilisant css2 (pour IE8)?

.parent { 
 
    background: yellow; 
 
    display: block; 
 
    height: 200px; 
 
} 
 
.child { 
 
    border: solid 1px #555; 
 
} 
 
.fill { 
 
    height: 100%; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    1 
 
    </div> 
 
    <div class="child fill"> 
 
    2 (fill available height) 
 
    </div> 
 
    <div class="child"> 
 
    3 
 
    </div> 
 
</div>

Fiddle

Answer 1

si vous avez besoin d'aide IE8 puis utilisez display:table/table-row

.parent { 
 
    background: yellow; 
 
    display: table; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 
.child { 
 
    display: table-row; 
 
} 
 
.height{ 
 
    height: 20px /*change the value for what you like */ 
 
} 
 
/*demo only */ 
 

 
.cell { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    border: 1px solid #555 
 
}

<div class="parent"> 
 
    <div class="child height"> 
 
    <div class="cell"> 
 
     1 
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="cell"> 
 
     2 (fill available height) 
 
    </div> 
 
    </div> 
 
    <div class="child height"> 
 
    <div class="cell"> 
 
     3 
 
    </div> 
 
    </div> 
 
</div>