Question

我正在尝试使用css属性高度100％，以便div占用浏览器中的所有可用空间。我可以使用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运行它，第二行要大得多。没有使用固定高度有没有解决方法？我想保持div占用所有可用空间的相同行为。如果没有解决方案使其适用于IE8，那么最好的降级解决方案（可能是IE8的条件css）。非常感谢你的帮助。

Answer 1

这个适用于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%;
}

Answer 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>

如何使用IE8高度100％

2 个答案: