基于骨架的网站中的粘性页脚

Question

我正在尝试基于骨架向我的网站添加"粘性页脚"，但我无法使其正常工作。我是根据本网站上的说明执行此操作的：http://www.cssstickyfooter.com/using-sticky-footer-code.html。在Chrome中，我在页面高度上获得了一两个额外的像素，这会导致垂直滚动条，而在IE中，主容器变为左对齐。

知道我应该如何基于骨架正确实现这一点吗？谢谢戴夫的出色工作！

Answer 1

我现在为此

开发了一个非常简单的纯 CSS 解决方案，位于此处。该解决方案基于 Skeleton 2.0.4，基本上包括创建两个单独的框架容器/行堆栈：一个用于页眉/正文，另一个用于粘性页脚。

Answer 2

Jquery

$(document).ready(function() {
   var footerHeight = $('.footer').height()+30; // "+30" footer on to add space
   $('body').css('margin-bottom',footerHeight);
});

CSS

html {
  position: relative;
  min-height:100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  color: white;
  background-color: #7bbc42;
}

Answer 3

如果您希望仅在用户尝试向下滚动到页面底部时才显示页脚，请将页脚上方的所有内容放入最小高度为"100vh"的单个div中。