html - 使页脚保持在没有主体的底部 { 高度 : 100% }

Question

如果我为我的模板设置 html,body { height: 100% } ，会发生一些奇怪的事情。它很难描述，也不可能在 fiddle 中重新创建问题，因为它只发生在本地主机上。当我尝试保存页面然后运行该页面时，问题消失了。

这是我的问题:

如果内容没有填满页面，我试图让 footer 留在我的页面底部，但是如果内容沿着 y 溢出页面，页脚应该在内容的底部，即表现得像一个普通元素。

我试过这样做:

html, body {
    height: 100%;
}

body {
    position: relative;
}

footer {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
}

这确实有效，但会稍有延迟。当我刷新页面时(当内容没有溢出时)，页脚位于内容的末尾而不是页面底部，正如预期的那样。但在大约 0.5 秒后，页脚位于底部。

我的页面底部有一个 CSS 切换器按钮，当我使用它时，页脚不会显示这种奇怪的行为。所以我认为这不是 CSS 的错。同样使用 ctrl+s 保存页面然后运行保存的页面并没有显示这个问题，所以这可能是因为 Django。

这是我的代码:fiddle这是保存页面的 RAR:dropbox

Answer 1

将最小高度应用于您的容器 div && 将 padding-bottom 应用于与页脚高度匹配的 body div。

jsFiddle

<div id="container">
    <div id="header"></div>
    <div id="body">
        <!-- content here -->

    </div>
    <div id="footer"></div>
</div>

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}