Question

我对有固定标题的粘性页脚有疑问。我遵循了一些似乎符合我想要实现的解决方案（http://ryanfait.com/sticky-footer/）或（http://css-tricks.com/snippets/css/sticky-footer/）和（A true sticky footer with a fixed header?），但仍有一些我想要的解决。

这是我的JSFiddle

页面底部的页脚内容很少或很多 - 检查！

由于#siteContents：before（创建一个与标题高度相同的间隔符），标题下面没有内容 - 检查！

滚动条仍然存在微小的内容 - 取消选中！

在div内部页面底部的页脚（siteContents）我有这样的东西 - 取消选中！

(...)
<div id="siteContents" class="clearfix">
     <div itemscope="itemscope" itemtype="http://www.datavocabulary.org/Something/">.. </div>
</div>
(...)

itemscope div 能否对此行为负责？

似乎是因为当页面加载并且页脚的高度由浏览器计算时，它将页脚放在他知道的底部。 itemscope div中的内容（表格，表格，......）溢出了错失位置的页脚。

在这种情况下，我该怎么做才能将粘性页脚保持在底部？

Answer 1

我建议您使用min-height和position: absolute;进行此类布局。因此，您的容器将以至少100％的高度显示：

.wrapper {
    position: relative;
    min-height: 100%;
}

您的粘性页脚需要position: absolute;和bottom: 0;，以便元素始终位于其父元素（.wrapper）的底部：

.page-foot {
    position: absolute;
    bottom: 0;  
}

您的标题将相同，但position: fixed;。由于您不希望页眉和页脚与您的内容重叠，因此您需要同时设置padding-top和padding-bottom。如果您不想使用固定的padding-top，则可以使用javascript设置padding-bottom / padding。据我所知，没有CSS方法可以达到同样的效果。

这是一个简单的demo。

粘滞页脚与固定导航栏

1 个答案: