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

时间：2017-01-28 22:27:01

标签： html css css3

我目前不是一个出色的前端人员，现在我的应用程序中的页脚出现问题。我在CSS中错误地给了它max-width。基本上我希望它始终位于页面的底部，无论屏幕大小或页面上有多少内容。以下是我目前正在使用的屏幕截图。

截图：

enter image description here

注意页脚是如何漂浮在那里的中间。我希望它就在页面的最底部。如果用户要调整屏幕，则页脚将保留在底部。这是我当前的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;
}

任何帮助都会很棒。

1 个答案:

答案 0 :(得分：0)

这是一般的想法。没有你的标记，我不能给你一个更具体的答案，但这应该做到。 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: absolute;之间差异的好文章，以及当您使用position: relative; https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/时position: absolute;为何非常重要/ p>

相关问题
最新问题