使用内部包装器创建一个粘性底部页脚，从页眉到页脚延伸

Question

我已经在HTML / CSS中创建了我的网页的主要框架，但现在意识到我需要一个粘滞的页脚，它始终位于屏幕的底部，因此位置固定，我需要内部网段，所有网页内容都被调用（包装）从标题的底部延伸到页脚的顶部，所以我想要的是当你在网页浏览器上缩小时，wight段适合浏览器的整个高度，以便它可以在任何显示高度。

这是一个JS小提琴

http://jsfiddle.net/Q8JpC/5/

如果有人发现如何做到这一点，请你可以在堆栈溢出中编写代码作为回复，因为这个jsfiddle只是我的测试网站，并且不会将它用于真实的东西。

我尝试将包装器设置为

height:100vh;, 

这总是填满屏幕高度，但是当我添加内容时它不会扩展以适应屏幕上的内容。

非常感谢你的帮助！谢谢

Answer 1

没有将它应用到您的设计中，但我经常使用这种技术： 请参阅：Modern sticky footers

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

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

只需添加：

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

除此之外，将主体更改为绝对位置而不是固定位置，并将body-body添加到body元素w（与页脚高度相同）。