当我不使用 flexbox 页面布局时，如何让页脚占据剩余的高度？答案

【问题标题】：How do I make my footer take up the remaining height when I'm not using a flexbox page layout?当我不使用 flexbox 页面布局时，如何让页脚占据剩余的高度？
【发布时间】：2018-10-09 22:17:59
【问题描述】：

我想创建一个页脚来占用我页面上剩余的未使用空间。我找到了这个例子——Make a div fill the height of the remaining screen space，但它使用了弹性框，我在当前页面中没有使用它：

html {
  height: 100%;
}

body {
  margin: 0;
  text-align: center;
  height: 100%;
}

footer {
  background-color: #003162;
  padding: 5px;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
}

footer a {
  color: #fdb515;
}

<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

奇怪的是页脚占用了太多空间。即使这不是我所要求的，它也会导致滚动 - https://jsfiddle.net/g7Ldc7pt/2/ 。如何告诉页脚占用剩余的可见空间？如果内容不可见但全部都在那里，我只想要一个滚动条。

【问题讨论】：

标签： html css height footer

【解决方案1】：

使用网站剩余部分制作页脚的唯一方法是 1.为标题和内容设置特定的高度和 2. 设置页脚高度为“calc(100% - (HEIGHT_OF_HEADER + HEIGHT_OF_CONTENT) 我也用 Javscript 尝试过，但没有机会...... 提示：在全页模式下使用我的代码

html {
    height: 100%;
}

body {
    margin: 0;
    text-align: center;
    height: 100%;
}

header{
  height: 60px;
}

#main{
  height: 400px
}


footer {
    background-color: #003162;
    padding: 5px;
    height: calc(100% - 470px);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
}

footer, footer a {
        color: #fdb515;
}

<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

【讨论】：

所以你是说除非我知道标题和内容的具体高度（我不知道），否则我的要求是不可能的？

【解决方案2】：

唯一的non-flex & non-grid dynamic 解决方案可以使用 parent 上的 display: table 和 on 上的 display: table-row 子元素：

html, body {
  height: 100%; /* mandatory */
}

body {
  display: table; /* added */
  width: 100%; /* added  */
  margin: 0;
  text-align: center;
}

footer {
  display: table-row; /* added */
  height: 100%; /* mandatory */
  background-color: #003162;
  /*padding: 5px; has no effect, that's why you need to put it on the "td" child */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
}

footer a {
  display: table-cell; /* added */
  padding: 5px; /* added */
  color: #fdb515;
}

<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

【讨论】：