摆脱带有粘性页脚的垂直滚动条

Question

我目前正在开发一个要求页脚位于底部的网络应用程序。我能够将页脚移到底部，但在我的屏幕上，尽管内容没有占据整个页面，但我必须向下滚动才能看到页脚。

我有以下用于粘性页脚的 CSS 代码：

html, body {
  height: 100%;
  width: 100%;
}

#container {
  overflow: none;
  width: 80%;
  min-height: 100%;
  margin: 0 auto -2em; /* Height of footer */
 }

.push {
  height: 2em;
} 

.primary-footer {
   width: 100%;

}
.primary-footer .copyright {
  height: 2em;
  background: red;
  color: #fff;
  padding-left: 20%;
  padding-top: 0.5%;
  clear: both;
}

项目布局见：https://jsfiddle.net/7m6Lqmww/

基于 jsfiddle，它在较小的屏幕上似乎可以正常工作，但在较大的屏幕上，会出现一个垂直条。

Answer 1

您当前的代码不起作用有两个原因：

1. 您错误地调整了页脚的大小。它有一个填充，可以增加它的总大小。您可以使用不同的 box-sizing 选项进行更改：

   .primary-footer .copyright { box-sizing：边框框； }

但我认为最好只为 padding-top 使用 em 值并将其添加到总页脚高度的因子中。

1. 您没有考虑页眉的高度。您试图通过在其上方放置一个与整个页面大小相同的元素来向下移动页脚，但该元素已被页眉向下推。您必须为其设置高度值。

这给我们留下了这个：

.primary-footer .copyright {
  height: 2em;
  background: red;
  color: #fff;
  padding-left: 20%;
  padding-top: .25em; /* change */
  clear: both;
}
#container {
  box-sizing: border-box; /* add */
  overflow: none;
  width: 80%;
  min-height: 100%;
  padding-top: 2em; /* add */
  margin: -2em auto -2.25em; /* change */
}

header {
  height: 1.5em;
  width: 100%;
  background: red;
  padding: .25em 0;
}

添加上边距和边距会使容器向上移动，使其与页面顶部齐平，同时保持其内容可见。 Box-sizing 防止额外的高度被填充添加到容器中。

注意：我已将页眉和页脚中的填充值从百分比更改为像素。填充百分比基于宽度，因此无法计算元素的总大小。