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

Question

我已经用 HTML/CSS 制作了我的网页的主要框架，但现在我意识到我需要一个始终卡在屏幕底部的粘性页脚，以便固定位置，我需要调用所有网页内容的内部部分(包装)从页眉底部延伸到页脚顶部，所以我想要的是，当您在网络浏览器上缩小时，wight 段适合浏览器的整个高度，以便它可以在任何显示高度。

这是一个 JS fiddle

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

如果有人知道如何做到这一点，请将代码写在堆栈溢出中作为回复，因为这个 jsfiddle 只是我的测试网站，不会将其用于真实的网站。

我试过将包装器设置为

height:100vh;, 

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

非常感谢您的帮助!谢谢

Answer 1

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

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

编辑。我在这里编辑了你的 fiddle : JSFiddle

只需添加:

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

除此之外，将 body 更改为 position absolute 而不是 fixed 并向 body 元素 w 添加 margin-body(与页脚的高度相同)。