Question

我正在尝试添加一个＆＃34;粘性页脚＆＃34;到我的网站基于骨架，但我不能让它正常工作。我是根据本网站上的说明进行此操作的：http://www.cssstickyfooter.com/using-sticky-footer-code.html。在Chrome中，我在页面的高度获得了一个或多个像素，这导致了一个垂直滚动条，在IE中，主容器变为左对齐。

知道如何根据Skeleton正确实现这个吗？谢谢Dave的出色工作！

Answer 1

我现在开发了一个简单的纯CSS解决方案，located here。该解决方案基于Skeleton 2.0.4，基本上包括创建两个单独的骨架容器/ rowstack：一个用于标题/正文，另一个用于粘性页脚。

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

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

基于骨架的网站粘性页脚

3 个答案: