7

我正在尝试使用 css 属性 height 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）。非常感谢您的帮助。

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 回答