Question

我在网上尝试过很多教程，尝试了javascripts但是没有任何功能可以用于我的页脚。我只是想让它坚持到底。如果我将其固定在内容位于屏幕下方的页面中，则页脚将无法在页面中工作，该页面具有屏幕大小内容。如果我修一个其他的休息。我该如何解决这个问题？

在此页面中，页脚是正确的：http://fast-garden-6871.herokuapp.com/logs

在此页面中，它位于屏幕的中间位置（您必须滚动）：http://fast-garden-6871.herokuapp.com/delegates

请帮忙！

Answer 1

添加此CSS代码：

.wrapper {
    display: block;
}

Answer 2

添加此css

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Answer 3

如果您的页脚是html中的最后一个元素，为什么不尝试...

body
{
  padding-bottom: 0;
  margin-bottom: 0;
}
footer
{
  margin-bottom: 0;
}

或者如果整个事情都包含在.container div中，那么请改为：

.container {   margin-bottom:0;   }

Answer 4

尝试简单的代码：

html文件：

<div id="header"> Your header </div>
<div id="body"> Your body .. </div>
<div id="footer"> Your footer </div>

css文件：

#header {
  background-color: blue;
}

#body {
  background-color: green;
  min-height: calc(100vh - 18px - 200px); /* calc(100vh - {{use inspect for height of header}} - {{height of footer}}*/
}

#footer {
  height: 200px;
  background-color: red;
}

如何正确设置页脚？

4 个答案: