Question

请注意以下简单的jsFiddle - http://jsfiddle.net/mark69_fnd/DaYCa/28/

HTML：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
  </head>
  <body>
    <div class="container table">
      <div class='thead'>
        <div class='tr'>
          <div class='td'>
            <div class='header'>header</div>
          </div>
        </div>
      </div>
      <div class='tbody'>
        <div class='tr'>
          <div class='td'>
            <div class='content'>content</div>
          </div>
        </div>
      </div>
      <div class='tfoot'>
        <div class='tr'>
          <div class='td'>
            <div class='footer'>footer</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS：

html, body {
  height: 100%;
  width: 100%;
  font-family: sans-serif;
}
.container {
  height: 100%;
  width: 100%;
  background-color: #ddd;
  display: table;
}
.thead {
  display: table-header-group;
}
.tbody {
  display: table-row-group;
}
.tfoot {
  display: table-footer-group;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
}
.content {
  background-color: #bbb;
  border: solid 1px;
  height: 100%;
}
.header {
  background-color: #999;
  border: solid 1px red;
}
.footer {
  background-color: #999;
  border: solid 1px green;
}

铬：

enter image description here

Firefox和IE9：

enter image description here

如何更改代码，使其在所有三种浏览器上看起来与Chrome相同？

P.S。固定高度可用于页眉和页脚，但不能用于内容。

Answer 1

我玩了你的例子，并在表格中重新创建它，看看浏览器的行为方式。它完全一样：http://jsfiddle.net/scheinercc/hXYVm/
（在Mac OS Firefox Aurora / 20和Chrome最新稳定版上测试）

所以我猜Chrome的作用是一个小技巧，假设这个结果是开发人员通常想要的。

但我如何阅读代码：

td的高度仅由其子项的字体大小和行高定义。孩子的100％身高由父母决定。
将高度添加到td将为您提供一个td，其高度为100％，指向视口（在Firefox中 - 我猜在IE中），这意味着页脚和标题不可见如果你滚动到页面的中间。

Chrome再次假设，这实际上不是我们（开发者）所希望的，并通过计算以下内容得到与之前相同的结果。

我会说，你想要的实际上是：

containerHeight = 100% of page height - (headerContainerHeight + footerContainerHeight)

请在这个小提琴中找到一个小的JS例子：
http://jsfiddle.net/scheinercc/DaYCa/35/
（在Mac OS Firefox Aurora / 20和Chrome最新稳定版上测试）

我知道有一个HTML / CSS解决方案会更好，但我想不出任何atm。

Answer 2

只需将此代码添加到.content Css

即可

vertical-align:top;

像.footer css

这样

vertical-align:bottom;

然后测试你的firefox浏览器。它将显示类似于chorme。

是否有可能使Chrome，FF和IE9对待显示值tableXXX相同？

2 个答案: