html - 如何将这个div放置到页面底部

Question

我一直试图让页脚粘在页面底部。

这是基本布局:

<div id="div-header"></div>     
<div id="div-body">
    <h2>Some content</h2>
    <div id="div-left">Left content</div>
    <div id="div-right">
        right content
    </div>
</div>
<div id="div-footer-bottom"></div>

这就是我设计页脚的方式:

#div-footer, #div-footer-bottom{
    background-color: red;
    border-top: 1px solid #CCCCCC;
    height: 40px;
    padding: 20px 30px;
    text-align: right;

}

#div-footer-bottom{
    position: relative;
    clear: both;
}

如下所示，当浏览器缩放至 100% 时，页面呈现正常:

但是，例如，如果浏览器缩放至 120%，则页面的显示方式如下:

请查看 jsfiddle 中的完整代码以发现我做错了什么，因为我不知道还能尝试什么:

http://jsfiddle.net/RS88D/

提前致谢。

Answer 1

尝试添加以下CSS

#div-footer-bottom{
    position: fixed;
    bottom:0;
    left:0;
    clear: both;
    width:100%;
}

重叠

将 margin-bottom 添加到 div-left。边距应等于页脚的高度(还添加填充像素)。对于你的情况

#div-left
{
  margin-bottom: 80px;
}

2014 年 3 月 24 日更新

对于您的第一个 fiddle 详细信息，只需添加以下内容并尝试，

body, html
{
      height:100%;
}

并在 #div-body css 中，删除 min-height: 490px; 并添加 min-height: calc(100% - 190px);