ブラウザで利用可能なすべてのスペースをdivが使用するために、cssプロパティの高さを100%使用しようとしています。ChromeとFirefoxで動作させることはできますが、IE8では動作させません。実際、IE8の高さ100%は、使用可能なスペースの100%を意味するFirefoxやChromeとは異なり、直接の親のサイズの100%を意味することを理解しています。
私はこのサンプルを思いついたhttp://jsfiddle.net/GdqjK/
html, body {
margin: 0; padding: 0;
bottom:0px;
height:100%;
}
.grid {
display : table;
width:100%;
}
.tablerow {
display : table-row;
}
.tablecell {
display : table-cell;
}
.grow {
bottom:0px;
height:100%;
}
<div class="grid grow">
<div class="tablerow">
<div class="tablecell">
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</div>
</div>
<div class="tablerow grow">
<div class="tablecell grow" style="border: solid 3px">
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</div>
</div>
</div>
IE8で実行すると、2行目がはるかに大きくなることがわかります。固定高さを使用しない場合の回避策はありますか?利用可能なすべてのスペースを使用するdivの同じ動作を維持したいと思います。IE8で動作させるための解決策がない場合、最も劣化した解決策は何でしょうか(IE8の条件付きcssを使用する場合があります)。ご助力ありがとうございます。