0

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

这是我的问题：

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

4

1 回答 1

0

将 min-height 应用于您的容器 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;
}
于 2013-08-02T16:46:24.900 回答