Html 带有固定导航栏的粘性页脚

我有一个关于固定页眉的粘性页脚的问题。我遵循了一些似乎符合我想要实现的目标的解决方案，比如，或者，但是仍然有一些事情我想要解决

这是我的

页脚位于页面底部，内容很小或很多-检查

由于siteContents，页眉下方没有内容：在创建与页眉高度相同的间隔之前-检查

滚动条上仍有微小内容-取消选中

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

页脚在页面底部当在div站点内容中时，我有类似的内容-取消选中

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

itemscope div是否可以对此行为负责

这似乎是因为当加载页面时，浏览器会计算放置页脚的高度，然后将页脚放在他所知道的内容的底部。itemscope div表单、表中的内容，。。溢出错误放置的页脚

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

我建议使用最小高度和位置：绝对；对于这种布局。因此，您的容器将以至少100%的高度显示：

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

您的粘性页脚将需要位置：绝对；底部：0；使元素始终位于其父元素的底部。包装器：

您的标题将相同，但位置为：fixed；。由于您不希望页眉和页脚与内容重叠，所以需要同时设置padding top和padding bottom。如果不想使用固定的填充，可以使用javascript设置padding top/padding bottom。据我所知，要达到同样的效果，没有CSS的唯一方法

---

这里有一个简单的问题。

在编辑答案之前，我尝试了display:table parent div和display:table cell child，它确实起了作用。谢谢。@MrQ你说得对，它工作了，但我使用了display:table和display:table:cell；只是因为我认为你不需要设置固定的高度/填充。但事实上你还是不得不这么做。编辑后的答案完全相同，但标记和CSS更少。