如何将此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 日更新

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

body, html
{
      height:100%;
}

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