Firefox 不会为表格布局填充高度答案

【问题标题】：Firefox Won't Fill Height for Table LayoutFirefox 不会为表格布局填充高度
【发布时间】：2017-04-09 11:34:15
【问题描述】：

我正在为我的网站使用表格布局。它在 IE 和 Chrome 中运行，甚至在 IE 8 中完美运行。我的整个网站都在一个包含三个单元格的表格中。顶部导航栏、内容和底部页脚导航栏。表格的宽度和最小高度设置为 100%，中间单元格设置为高度：自动。这使得页脚至少被推到窗口的底部，如果有足够的内容，页脚会随着内容被推得更远。

但 Firefox 不会使中间单元格的高度填充到表格的最小高度 100%。这是它在 Internet Explorer 和 Chrome 中的样子（工作）：

但在 Firefox 中，中间单元格的高度未填充（不起作用）：

这是我的 CSS：

<style>
#tablecontainer{
width: 100%;
min-height: 100%; 
}

.table-panel {
    display: table;
}
.table-panel > div {
    display: table-row;
}
.table-panel > div.fill {
    height: auto;
}




/* Unimportant styles just to make the demo looks better */
#top-cell {
    height: 50px;
    background-color:aqua;
}
#middle-cell {
  /* nothing here yet */
  background-color:purple;
}
#bottom-cell {
    height:50px;
    background-color:red;
}




body {
    height: 100%;
    margin: 0;
}
html {
    height: 100%;
}

这是我的 HTML：

<body>

    <div id="tablecontainer" class="table-panel">
        <div id="top-cell">
            <nav>
            </nav>
        </div>

    <div id="middle-cell" class="fill">
        <div class="section">
        <div class="container">
        <p>{{ content }}</p>
        </div>
        </div>
    </div>

    <div id="bottom-cell">
        <nav>
            <p>I'm the footer!</p>
        </nav>
    </div>
</body>

这是一个小提琴。 https://jsfiddle.net/mmgftmyr/ 完全正确，fiddle 可以在 Chrome 和 Internet Explorer 中工作，但不能在 Firefox 中工作。

【问题讨论】：

标签： html css firefox html-table

【解决方案1】：

问题存在于以下样式：

#tablecontainer {
  min-height: 100%;  /* change min-height to height */
  width: 100%;
}
.table-panel {
  display: table;
}

min-height: 100% 属性始终无法与 min-height 一起正常工作。将min-height 更改为height 即可。

注意：HTML 表格具有特殊的高度行为。如果您为table 或具有display: table 的元素指定height 并且其内容不适合，则其高度将根据内容自动增加。所以我们总是可以在表格中使用height 而不是min-height。

#tablecontainer{
  width: 100%;
  height: 100%;
}

.table-panel {
  display: table;
}
.table-panel > div {
  display: table-row;
}
.table-panel > div.fill {
  height: auto;
}

/* Unimportant styles just to make the demo looks better */
#top-cell {
  height: 50px;
  background-color:aqua;
}
#middle-cell {
  /* nothing here yet */
  background-color:purple;
}
#bottom-cell {
  height:50px;
  background-color:red;
}

body {
  height: 100%;
  margin: 0;
}
html {
  height: 100%;
}

<div id="tablecontainer" class="table-panel">
  <div id="top-cell">
    <nav>
    </nav>
  </div>

  <div id="middle-cell" class="fill">
    <div class="section">
      <div class="container">
        <p>{{ content }}</p>
      </div>
    </div>
  </div>

  <div id="bottom-cell">
    <nav>
      <p>I'm the footer!</p>
    </nav>
  </div>
</div>

【讨论】：

【解决方案2】：

在 Firefox 上，min-height 不会在 display: table; 上解释，而不是使用 min-height 使用 height:100%;

#tablecontainer{
 width: 100%;
 height:100%;
}

updated fiddle

【讨论】：