确保页脚始终固定在底部。 -CSS

Question

我目前不是一个很好的前端人员，现在我的应用程序中的页脚有问题。 我错误地给它的最大宽度的CSS。 基本上，无论屏幕大小或页面上有多少内容，我都希望它始终位于页面底部。 这是我目前正在使用的屏幕截图。

截图：

请注意，页脚有点漂浮在那儿的中间。 我希望它位于页面的最底部。 并且如果用户要调整屏幕，则页脚将保留在底部。 这是我目前的HTML和CSS

HTML：

<div class="footer">
  Copyright @ 2016 Lockdown Inc
</div>

CSS：

.footer {
  border-top: 1px solid #d3d5d5;
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  background-color: #d2d2d2;
}

任何帮助都会很棒。

Answer 1

这是一般的想法。 没有您的标记，我无法为您提供更具体的答案，但这应该可以解决。 position: fixed; 将其保留在窗口底部。

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

如果您希望将其放在页面底部，则不必一定是窗口...

body,html {
  min-height: 100vh;
  position: relative;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

作为参考，这是一篇关于position: fixed;之间差异的好文章position: fixed; 和position: absolute; ，以及为什么position: relative; 使用position: absolute;时很重要position: absolute; https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/