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

当前代码无效的原因有两个：

您错误地容纳了页脚的大小。它有一个填充，增加了它的总大小。您可以使用不同的大小调整选项来更改它：

.primary-footer .copyright { box-sizing：border-box; }

但是我认为最好只使用填充顶部的em值并将其添加到总页脚高度的因式中。

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

这让我们留下了这个：

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

添加填充和边距顶部会将容器向上移动，以使其与页面顶部齐平，同时保持其内容可见。盒子大小可以防止填充物将额外的高度添加到容器中。

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

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

1 个答案: