Question

我正在开发一个带有静态标头，两个内容列和粘性页脚的新页面。一切都在起作用，除了我的页脚在我的内容下继续滚动。我很感激可以给予任何帮助，让它停止在我的内容之下。

我尝试了找到的建议无济于事：

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

Answer 1

我相信这是一个真正的粘性页脚，如你所愿。

http://jsfiddle.net/PU8U3/

我不得不从你的CSS中删除很多东西。我试图只留下必要的工作。你应该尝试在此基础上添加你需要的东西。

注意HTML中的样式表链接标记，当HTML加载另一个时，使用JSFiddle编辑CSS真的很难。

Answer 2

您可以使用页脚大小为内容添加填充底部，您可以随时使用。

CSS粘性页脚属于内容

2 个答案: