Question

我在SOF上发现了很多类似的问题但不幸的是它们都涉及到：如何制作粘性页脚。我不是想让我的页脚随时出现在页面底部（我的意思是：无论用户在页面的哪个位置）。

实际上我想要实现的目标非常简单，但我找不到解决方案。我有很多页面没有很多文本，所以目前页脚在文本结尾后就像一行，页面底部有一个大的空白。如果页面只有几个文本，我希望页脚位于页面底部。

我必须把它放在我的页脚课上：

height : 100%

然后这个

margin-top: 100%

以及其他一些东西，但它没有成功。

谢谢！

Answer 1

如果您希望页脚始终位于页面底部，则必须为页面的“内容”部分指定高度值。这将迫使您的页脚始终位于底部。尝试这样的事情：

height: 800px

代表您的内容的div。

OR

使用绝对定位

将此应用到您的页脚。

.footer {
   position:absolute;
   bottom: 0px;
}

您可以在此处看到：http://jsfiddle.net/892JK/

只需观察它的上述两个属性即position：absolute和bottom：0px使它始终“粘住”到页面底部。

这与'sticky'标题概念非常类似，其中概念是，errm，以相反的方式查看，即属性将被修改为粘贴标题

.stickyHeader {
   position:fixed;
   top: 0px;
}

希望这有帮助!!!

Answer 2

您可以在样式表中使用min-height属性作为您在其中放置内容的特定div，就在页脚之前。

<div class="textclass">
 <p> 
 Text or content
 ..........
 </p>
</div>

<footer>
............
</footer>

CSS：

.text-class{
min-height:700px; /*adjust height at your end */
}

Answer 3

我使用过这种方法：http://ryanfait.com/sticky-footer/

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's       height */
}
.footer, .push {
  height: 155px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Answer 4

您必须指定包含body元素的主div的固定高度，然后指定footer.it将始终显示在指定的高度之后。

使页脚位于页面底部

4 个答案: