如何在 IE8 中使用高度 100%答案

【问题标题】：How use height 100% with IE8如何在 IE8 中使用高度 100%
【发布时间】：2012-12-14 18:24:37
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案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%;
}

【讨论】：

【解决方案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>

【讨论】：

用户试图让 DIV 达到 100% 的高度，这肯定表明他正在尝试布局内容。为此使用实际表格是非常糟糕的做法。 stackoverflow.com/questions/83073/…smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell
@AndrewPlummer，不要只是反刍，告诉我为什么这里“非常糟糕”。与此答案相比，kcsoft 提供的上述答案看起来更像是维护混乱。此外，这个答案显然也使用了表格布局，即使它试图隐藏它的位置，对它的实际情况感到羞耻。
1.你正在混合结构和风格。您正在布置的数据表是什么？ “HTML 表格元素 () 表示二维或更多维度的数据。” - MDN 从语义上讲，使用表格进行布局完全没有意义。这很糟糕，尤其是可访问性和可维护性。但是，您也在为规范编写内容，比我们年长和聪明的人明确声明不要这样做。参见 11.1p 6 w3.org/TR/html401/struct/tables.html 结构和演示：“w3.org/TR/html401/appendix/notes.html#notes-tables”

为了澄清我之前的观点，“表格不应该纯粹用作布局文档内容的一种方式......作者应该使用样式表而不是表格来控制布局。” - W3C。 11 表 - 11.1 表介绍 p6。上面的答案（不是你的）是正确的答案，而你的答案显然是不正确的。可悲的是，您宁愿人为地夸大您的答案，以促进使弱势群体更难上网的结构。或者至少，澄清为什么你比 W3C、MDN 甚至专门的维基百科页面更了解 en.wikipedia.org/wiki/Tableless_web_design

..... 最后：您说我的回答“显然不正确”。试图相信我们在这里都是成年人，我再次测试了我的代码，看看它是否有效。它确实有效，那你为什么说这个答案是“明显不正确的”？该答案确实回答了所提出的问题，因此尽管您的朋友大量反对，但我不会将其删除。（顺便说一句，群体思维是一件微妙而危险的事情，这正是 W3C 拒绝接受 whatwg 整整 2.5 年的原因。）如果我确实弄错了，而火焰战争实际上是预期的结果，那么请随意忽略我的回复。