Question

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

＆＃13;

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;
}

＆＃13;

<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

＆＃13;

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

Answer 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>

Answer 2

唯一非灵活＆amp;使用父上的display: table和子元素上的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>

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

2 个答案: