Question

我正在尝试为我正在处理的网站（see here）实施粘性页脚。我尝试按照CSS Sticky Footer上的指南 - 特别是this实施。

这在Firefox（13）中完美运行，但在Chrome（21）和IE（9）中，＃footer在页面下方进一步向下推，添加了一个垂直滚动条。我认为这与我在#wrapper中使用填充和边距有关 - 但是我无法专门针对这个问题。我真的很感激一些帮助。

网站结构：

<html>
    <div id="wrapper">
        <div id="header"></div>
        <div id="menu"></div>
        <div id="page"></div>
    </div>
    <div id="footer"></div>
</html>

和相关的CSS：

#wrapper {
    min-height: 100%;
    width: 100%;
}
#header { 
background: url("/images/backgrounds/transparent.png") transparent;
    border-bottom: 2px solid #EF7C31;
    height: 44px;
    margin: 0 auto 20px;
    width: 960px;
}
#menu { 
background:#FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    height: 60px;
    margin: 0 auto 20px;
    padding: 10px 20px;
    width: 920px;
}
#page {
background: #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin: 0 auto 30px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 20px 30px;
    width: 920px
}
#footer {
background: url("/images/backgrounds/transparent.png") transparent;
    border-top: 2px solid #EF7C31;
    clear: both;
    height: 116px;
    margin-top: -158px;
    overflow: auto;
    padding: 20px;
    position: relative;
}

谢谢

Answer 1

将此行添加到包装器中：

overflow: hidden;

所以你会：

#wrapper {
    min-height: 100%;
    width: 100%;
    overflow: hidden;
}

或者在页脚之前添加推送div。这将推动页脚。

Answer 2

我注意到一些导致一些问题的事情。您链接到的教程在工作时标记为恶意，因此我始终使用Ryan Fait's CSS Sticky Footer Tutorial。

检查你的内容我发现了一些差异。首先，您需要将html主体和高度设置为100％才能在所有浏览器中使用。其次，你的填充和你的边框导致了问题，所以我创建了另一个div，它将包含你的页脚中的特定内容，并将包含填充和边框css。

<强> HTML ：

<html>
    <div id="wrapper">
        <div id="header"></div>
        <div id="menu"></div>
        <div id="page"></div>
        <div class="push"></div>
    </div>
    <div id="footer">
        <div class="footerContent"></div>
    </div>
</html>

<强> CSS ：

    * {
    margin: 0;
}

html, body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width:100%;
    margin: 0 auto -158px; /* the bottom margin is the negative value of the footer's height */
}

#footer, .push {
    height: 158px; /* .push must be the same height as .footer */
}

.footerContent {
    border-top: 2px solid #EF7C31;
    padding:20px;
}

Live DEMO

具有填充和边距的粘性页脚 - 在FF中工作但与Chrome和IE有关

2 个答案: