让页脚停留在底部而无需身体{height：100％}

如果我为我的模板设置了html,body { height: 100% }，会发生一些奇怪的事情。它很难描述，也不可能在小提琴中重新创建问题，因为它只发生在本地主机上。当我试图保存页面然后运行该页面时，问题就消失了。让页脚停留在底部而无需身体{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

来源

2013-08-02 Sourabh

使用'分钟，height'风格'.book-container' – mshsayem

它的HTML/CSS问题。如果工作不正常，那么样式可能会重叠。使用浏览器的“检查元素”功能进行检查。它只能是Django的问题，如果风格标签或CSS文件没有加载正确。 –

@mshsayem我无法使用'min-height'，因为它不适用于所有分辨率。 – Sourabh

应用一个最小高度到您的div容器& &应用填充底，你的身体的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-02 16:46:24 Shivam

如果'body'具有'height：100％'，则会出现问题，所以这并不能解决问题。另外，在我的情况下，制作'容器{height：100％}'，这是'书容器'，只要'body' – Sourabh

让页脚停留在底部而无需身体{height：100％}

回答

相关问题