3

I am trying to add a "sticky footer" to my web site based on skeleton but I can't get it to work correctly. I am doing this based on the instruction on this website: http://www.cssstickyfooter.com/using-sticky-footer-code.html. In Chrome I get an extra pixel or two in the height of the page which result in a vertical scrollbar and in IE the main container becomes left-aligned.

Any idea how I should implement this properly based on Skeleton? Thank you Dave for the great work!

4

3 回答 3

5

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

于 2015-04-23T21:43:24.897 回答
1

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;
}
于 2014-12-25T20:54:03.383 回答
0

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

于 2017-02-10T15:59:05.760 回答