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

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

我想到的是：

HTML:

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

---

我不知道这个解决方案可能有什么特别的怪癖，但它似乎相当直截了当并且工作得很好。

对您的解决方案使用jQuery是可以的？理论上应该是这样，因为显示是内联块，所以应该正确堆叠。我看不出有任何理由它不应该帮助你使用flex我在哪里说过我想使用flex？我明确地说我不想

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

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;
}