Question

我已经看到了将页脚粘到底部的不同解决方案，但无法弄清楚我的方法出错的地方。我对页脚的风格如下：

footer { 
left: 0; bottom: 0; position : absolute; width: 100%; height : 40px}

最初，它很好地贴在页面底部。一旦我最小化浏览器并滚动，它就会粘在页面中间的某个位置，即使在最大化窗口之后也会停留在那里。任何帮助表示赞赏。

Answer 1

使用position: fixed;代替position: absolute;。您还需要在<body>添加一些底部填充以查看完整内容，此填充的值应等于<footer>的高度。

＆＃13;

body {
  height: 200vh;
  padding-bottom: 40px;
}

footer {
  left: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 40px;
  background: tomato;
}

＆＃13;

<footer>this is the footer</footer>

＆＃13;

检查MDN以获取有关CSS Position属性的更多信息。

Answer 2

试试这个：

div#footer{
position:fixed; // important
bottom:0; // important
left:0; // important
width:100%
height:100px;
}

这是一个JS小提琴，例如：https://jsfiddle.net/z72tLemr/

我添加了一些额外的标签和CSS来展示它是如何工作的。 关键是位置：固定;在页脚CSS声明中。关键是position：fixed将元素相对于浏览器窗口放置，因此在滚动时它将保持原位。

以下是有关职位的更多信息：https://www.w3schools.com/cssref/pr_class_position.asp

希望它有所帮助！

Answer 3

指定位置：相对于容器，然后位置：绝对;底部：0;到#footer。

Answer 4

你可以通过创建一个包装器来使页脚粘到底部，使用负边距和填充来减去页脚的高度......

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100vh;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -40px;
  /* Pad bottom by footer height */
  padding: 20px 20px 40px;
}

footer {
  height: 40px;
}

Demo

将页脚位置粘贴到底部（基本html和css）

4 个答案: