Question

如果我为我的模板设置了html,body { height: 100% }，那就会发生奇怪的事情。它难以描述，也不可能在小提琴中重现问题，因为它只发生在localhost。当我尝试保存页面然后运行该页面时，问题就消失了。

这是我的问题：

如果内容没有填满页面，我试图让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＆amp;＆amp;将填充底部应用于与页脚高度匹配的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;
}

使页脚保持在底部没有身体{高度：100％}

1 个答案: