CSS粘页脚在内容下

我正在使用静态页眉，两个内容列和一个粘页脚的新页面。除了我的页脚在我的内容下滚动之外，一切都在运作。我会很感激任何帮助，让它停止在我的内容下。CSS粘页脚在内容下

我试图无济于事发现的建议：

Content going under footer in Google Chrome and not FF

Content scrolling on mobile page with fixed header/footer

Placing footer under content doesn't seem to work

Why is my footer not going to the bottom of the page?

CSS：

body, html { 
    height: 99%; 
} 

#page { 
    position: relative; 
    margin-bottom: -100px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0; 
    height: 100%; 
    min-height: 100%; 
} 

#header { 
    clear: both; 
    float: none; 
    min-width: 0px; 
    margin-right: 0px; 
    margin-left: -9px; 
    margin-bottom: 0px; 
    margin-top: -9px; 
    z-index: 1; 
    position: fixed; 
    height: 150px; 
    width: 100%; 
    background-color: #fff517; 
} 

#wrapper { 
    margin-bottom: 100px; 
    float: none; 
    clear: both; 
    position: absolute; 
    margin-top: 170px; 
    left: 50%; 
    width: 854px; 
    margin-left: -422px; 
} 

#left-sidebar { 
    clear: none; 
    margin-left: auto; 
    margin-bottom: auto; 
    margin-right: 50px; 
    margin-top: auto; 
    min-height: 300px; 
    width: 200px; 
    float: left; 
    background-color: #39ff32; 
    position: relative; 
} 

#content { 
    clear: none; 
    float: left; 
    min-height: 300px;     
width: 600px; 
    background-color: #ff1c23; 
    position: relative; 
} 

.push { 
    clear: both; 
    height: 200px; 
} 

#footer { 
    clear: both; 
    padding-top: 50px; 
    background-color: #9f49ff; 
    text-align: center; 
    width: 100%; 
    height: 50px; 
    z-index: 0; 
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<html> 
<head> 
<base href="http://www.footballpickpool.com/new_fpp/"/> 
<link type="text/css" href="./resources/css/style.css" rel="stylesheet"/> 
</head> 

<body> 

<div id="page"> 
    <div id="header"> 
    </div> 

    <div id="wrapper"> 
     <div id="left-sidebar"> 
     </div> 

     <div id="content"> 
     </div> 
    </div> 
    <div class="push"></div> 
</div> 
<div id="footer"> 

</div> 

</body> 
</html>

小提琴：http://jsfiddle.net/aUTqf/

在此先感谢任何人谁可以提供一些见解。

编辑：我现在已经在每个浏览器中按预期工作，但IE浏览器。问题是由于几个元素的固定位置。现在要弄清楚IE，下面包含的代码：

body, html { 
    background-position: 50% 80%; 
    background-repeat: no-repeat; 
    background-image: url(../images/background.jpg); 
    background-color: #d9d9d9; 
    height: 99%; 
    margin: 0px; 
    padding: 0px; 
} 

#header { 
    padding-top: 15px; 
    margin-left: auto; 
    margin-bottom: 45px; 
    margin-right: auto; 
    margin-top: 0px; 
    color: white; 
    position: fixed; 
    z-index: 99998; 
    left: 0; 
    top: 0; 
    height: 150px; 
    width: 100%; 
    background-color: #fff517; 
    } 

#wrapper { 
    float: left; 
    clear: both; 
    position: relative; 
    left: 50%; 
    width: 854px; 
    margin-left: -422px; 
    padding-top: 200px; 
    padding-bottom: 150px; 
} 

#left-sidebar { 
    clear: none; 
    margin-left: auto; 
    margin-bottom: auto; 
    margin-right: 50px; 
    margin-top: auto; 
    min-height: 300px; 
    width: 200px; 
    float: left; 
    background-color: #39ff32; 
    position: relative; 
} 

#content { 
    min-height: 300px; 
    clear: none; 
    float: left; 
    width: 600px; 
    background-color: #ff1c23; 
} 

.push { 
    clear: both; 
    height: 100px; 
    background-color: #9f49ff; 
} 

#page { 
    margin-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: auto; 
    height: 100%; 
    min-height: 100%; 
    width: 100%; 
    z-index: 1; 
} 


#footer { 
    clear: both; 
    margin-top: auto; 
    margin-left: auto; 
    margin-bottom: auto; 
    margin-right: auto; 
    background-color: #9f49ff; 
    text-align: center; 
    width: 100%; 
    height: 50px; 
    z-index: 0; 
}

来源

2012-08-04 Jeremy1026

我认为这可以通过添加z-index来完成，但我认为固定页眉和页脚会导致问题在较低的高度，所以我建议你只做一个修复 – 2012-08-04 02:58:07

@Mayankswami我不想要页脚固定，只在页面高度高于窗口高度时保持在内容以下，并且当页面高度小于窗口高度时粘在页面底部。 – Jeremy1026 2012-08-04 03:25:11