如何将此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);