Question

我正在为我的网站使用表格布局。它在IE和Chrome中工作，甚至是IE 8。我的整个网站都在一个包含三个单元格的表格中。顶部导航栏，内容和底部页脚导航栏。表格的宽度和最小高度设置为100％，中间单元格设置为height：auto。这使得页脚至少被推到了窗口的底部，如果有足够的内容，页脚就可以毫不费力地与内容一起推进。

但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/这完全准确，小提琴适用于Chrome和Internet Explorer，但不适用于Firefox。

Answer 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表格具有高度的特殊行为。如果您为height指定table或display: table并且其内容不适合，则其高度将根据内容自动增加。因此，我们始终可以使用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>

Answer 2

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

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

updated fiddle

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

2 个答案: