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

Posted 2023-03-21

【中文标题】当我不使用 flexbox 页面布局时，如何让页脚占据剩余的高度？

【英文标题】：How do I make my footer take up the remaining height when I'm not using a flexbox page layout?

【发布时间】：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/ 。如何告诉页脚占用剩余的可见空间？如果内容不可见但全部都在那里，我只想要一个滚动条。

【参考方案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>