html - 摆脱粘性页脚附带的垂直滚动条

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. 您错误地调整了页脚的大小。它有一个填充，增加了它的总大小。您可以使用不同的框大小选项更改它:

   .primary-footer .copyright { 框大小:边框框；

但我认为最好只为 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;
}

添加 padding 和 margin tops 将容器向上移动，使其与页面顶部齐平，同时保持其内容可见。调整盒子大小可防止通过填充向容器添加额外的高度。

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