7

ブラウザで利用可能なすべてのスペースを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を使用する場合があります)。ご助力ありがとうございます。

4

2 に答える 2

7

これはIE8+で動作します

http://jsfiddle.net/DNEb3/2/


<div class="grid"> 
    <div class="tablerow">
        <div class="tablecell" style="border: solid 3px">
            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" 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> 

</body></html>​


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

.grid {
  display : table;
  width:100%;
    height: 100%
}

.tablerow {
  display : table-row;
}

.tablecell {
  display : table-cell;
}
.grow {
  bottom:0px;
  height:100%;
}    

</p>

于 2012-12-14T18:56:06.010 に答える
2

テーブルを使用して 100% の高さを実現できます。

<html><body>が両方とも 100% の高さであることを確認してください。

完全な作業例:

<!doctype html>
<html style='height:100%;'>
<body style='margin:0; height:100%;'> <!-- margin:0 is optional -->

<table style='background:green; height:100%;'>
    <tr>
        <td>Content</td>
    </tr> 
</table>

</body>
</html>
于 2014-04-28T19:11:04.027 に答える