Question

所以我试图设计一个网页，并试图让页脚始终坚持到页面底部。我确实设法解决了这个问题，但我弄清楚我的错误在哪里。我想知道的是，这样做有什么不同，

body {
    background: red;
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background: black;
    padding:10px;
}
#content {
    background: green;
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

并且这样做，

html,
body {
    background: red;
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background: black;
    padding:10px;
}
#content {
    background: green;
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

为什么将html部分放在顶部会使代码的页脚部分工作？它似乎不会影响任何其他代码，只是使页脚停留在底部的部分。这不是我的代码只是我从这里得到的代码我在我的代码中遇到了同样的问题，只是想知道这笔交易是什么原因我无法找到任何相关信息。

http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/

对不起，如果我第一次写错了这个。

Answer 1

Body查看其父级（HTML）以了解如何扩展动态属性，因此HTML元素也需要设置它的高度。

Answer 2

absolute position必须relative到另一个元素，在您的情况下，footer相对于body。默认情况下，屏幕上的body和html的高度不是100%，因此如果您将页脚absolute设置到正文的底部，它将位于底部身体不是屏幕，所以为了解决这个问题，你使html的body height 100%必须也是100%到屏幕。

您还可以使用fixed position代替absolute，position:fixed将relative screen element而不是任何其他footer您height即使在身体底部也是100%而html {{1}}不是{{1}}

用顶部的html格式化问题

2 个答案: