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

Question

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

Answer 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。我还制作了足够大的页脚，足以容纳至少一行文本，虽然看起来这可以调整效果等等...页脚也必须在“网站包装器”之外。

我不知道这个解决方案的特殊怪癖可能是什么，但它似乎相当直接并且运作良好。