我刚刚找到了创建粘性页脚的解决方案：
html {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
left: 0; right: 0;
}
尽管我想知道如何position:relative在html标签上贴上标签。
我的理解方式：它不再position: absolute是相对于视口，而是相对于文档。
这是好习惯吗？
虽然htmlCSS可以像其他任何元素一样设置根元素的样式，但是某些属性由于是根元素而可能会表现出不同的行为。position是这些属性之一：特别是规范中这样说：
用户代理可以将位置视为根元素上的“静态”。
据我所知，没有现代的浏览器真正做到这一点，但是仍然不能保证它position: relative总是可以在根元素上工作。你的情况，你可以简单地通过设置避免这种情况position: relative的上body元素，而不是html元素：
body {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
left: 0; right: 0;
}
请注意，如果正文未达到视口的高度（例如，当页面中没有足够的内容时），页脚将不会停留在页面的底部。如果这是你的一个问题，设置height和min-height上html并body按照我的答案说明这里：
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0;
left: 0; right: 0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句