0

我正在尝试为我正在处理的网站实现一个粘性页脚（请参见此处）。我试图遵循CSS Sticky Footer的指南——特别是这个实现。

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

谢谢

4

2 回答 2

2

将此行添加到包装器中：

overflow: hidden;

所以你会有：

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

或者在页脚之前添加一个推送 div。这会将页脚向下推。

于 2012-05-23T12:49:02.823 回答
0

我注意到一些导致一些问题的事情。您链接到的教程在工作中被标记为恶意，所以我一直使用Ryan Fait 的 CSS Sticky Footer Tutorial。

检查你有什么，我注意到了一些不同之处。首先，您需要将 html body 和 height 设置为 100% 才能在所有浏览器中工作。其次，您的填充和边框引起了问题，因此我创建了另一个 div，该 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;
}

现场演示

于 2012-05-23T12:50:22.457 回答