如何将此div放置到页面底部

Question

I'm stuck trying to make the footer stick to the bottom of the page.

This is the basic layout:

<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>

And this is how I style the footer:

#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;
}

As you can see below, the page is rendered OK when the browser is zoomed at 100%:

But if the browser is zoomed at 120%, for example, this is how the page is displayed:

Please take a look at the full code in jsfiddle to discover what I am doing wrong, since I don't know what else to try:

http://jsfiddle.net/RS88D/

Thanks in advance.

Answer 1

Try adding the following css

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

For overlapping

Add margin-bottom to the div-left . Margin should be equal to the height of the footer (add padding pixels also). In your case

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

Update 24-Mar-2014

For your first fiddle details just add the below and try,

body, html
{
      height:100%;
}

And in the #div-body css, remove min-height: 490px; and add min-height: calc(100% - 190px);