我已经用 HTML/CSS 制作了我的网页的主要框架,但现在我意识到我需要一个始终卡在屏幕底部的粘性页脚,以便固定位置,我需要调用所有网页内容的内部部分(包装)从页眉底部延伸到页脚顶部,所以我想要的是,当您在网络浏览器上缩小时,wight 段适合浏览器的整个高度,以便它可以在任何显示高度。
这是一个 JS fiddle
如果有人知道如何做到这一点,请将代码写在堆栈溢出中作为回复,因为这个 jsfiddle 只是我的测试网站,不会将其用于真实的网站。
我试过将包装器设置为
height:100vh;,
这确实总是填满屏幕高度,但它不允许当我添加内容时它不会扩展以适应屏幕外的内容。
非常感谢您的帮助!谢谢
最佳答案
没有将它应用到您的设计中,但我经常使用这种技术: 请参阅:Modern sticky footers
我还建议使用 html5 标记标签,创建它们是为了获得正确的语义,而不是使用 header、nag、footer 等类...
编辑。 我在这里编辑了你的 fiddle : JSFiddle
只需添加:
html {
position: relative;
min-height: 100%; }
除此之外,将 body 更改为 position absolute 而不是 fixed 并向 body 元素 w 添加 margin-body(与页脚的高度相同)。
关于javascript - 使用从页眉延伸到页脚的内部包装创建粘性底部页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22944617/