Javascript 使用从页眉延伸到页脚的内部包装创建粘性底部页脚

我已经用HTML/CSS制作了我的网页的主框架，但是现在我意识到我需要一个粘性的页脚，它总是粘在屏幕的底部，所以位置是固定的，我需要一个内部段，所有网页内容都被称为（包装器），从页眉的底部延伸到页脚的顶部，所以我想要的是，当你缩小网页浏览器时，右边的部分适合整个浏览器的高度，这样它就可以在任何显示高度上工作

这是一把JS小提琴

如果有人发现了如何做到这一点，请您在stack overflow中编写代码作为回复，因为这个JSFIDLE只是我的测试网站，不会用于实际用途

我已尝试将包装设置为

height:100vh;, 

这通常会填充屏幕高度，但不允许在我添加内容时，它不会延伸到适合屏幕外的内容

---

非常感谢您的帮助！谢谢

我没有将其应用到您的设计中，但我经常使用这种技术： 见：

我还建议使用html5标记，它们是为了获得正确的语义而创建的，而不是使用header、nag、footer等类

编辑。 我在这里编辑了你的小提琴：

只需添加：

html {
  position: relative;
  min-height: 100%; }

除此之外，将主体更改为position absolute而不是fixed，并将边距主体添加到主体元素w（与页脚高度相同）