可变高度的粘性页脚解决方案

【问题标题】：Sticky Footer Solution with variable height可变高度的粘性页脚解决方案
【发布时间】：2015-02-11 14:44:55
【问题描述】：

我一直在努力寻找处理粘性页脚的不同方法。有许多不同的解决方案，从使用固定高度和边距到使用 javascript 或 flexbox 等......我想找到一种不使用框架的解决方案，该框架适用于响应式模板并且没有固定高度，这似乎更难。

【问题讨论】：

你的解决方案可以使用 jQuery 吗？
理论上应该是这样，因为显示是内联块，它应该正确堆叠。我看不出有什么理由不这样做
This link 应该可以帮助您使用 flex
我在哪里说过我想使用 flex？我特别说我不想

【解决方案1】：

我想出的是以下内容：

HTML：

<div id="siteWrapper">
   <header>header content</header>
   <div id="siteContent">site content</div>
</div>
<footer>footer content</footer>

CSS：

html{ 
   padding: 0;
   margin: 0;
}

#siteWrapper{
   min-height: 90vh;
   width: 100%;
   display: inline-block;
}

header{
   100%;
}

footer{
   width: 100%;
   display: inline-block;
   clear:both;
   min-height: 10vh;
}

我将页脚最小高度和站点包装器最小高度的总和设置为 100vh。我还使页脚 vh 大到足以容纳至少一行文本，尽管这似乎可以调整效果等...页脚也必须位于“站点包装”之外。

我不知道这个解决方案的特殊之处可能是什么，但它似乎相当直截了当并且运行良好。

【讨论】：