1

请注意以下简单的 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;
}

铬合金：

在此处输入图像描述

火狐和 IE9：

在此处输入图像描述

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

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

4

2 回答 2

1

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

所以我猜 Chrome 所做的有点花招，假设这个结果是开发人员通常想要的。

但是我如何阅读代码：

  • tds 高度仅由其子项的字体大小和行高定义。孩子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。

于 2013-01-23T07:27:43.683 回答
0

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

vertical-align:top;

像这样在 .footer css

vertical-align:bottom;

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

于 2013-01-12T17:50:51.043 回答