Question

我试图为正在运行的 i m 站点( < a href="http://www.exstockresenters.co.uk" rel=“nofollow” 见这里 ) 执行一个粘贴页脚。我试图在 < a href=" http://www.csstickyfoter.com/" rel="nofollow" > CSS Sticky Footer - 具体来说, < a href=" http://www.smipple.net/nippie/Owlyfol/HTML5%20Boilerplate%20Sticky%20Footer%20 20100% 25%20centence%20header/foter%20CSS" rel=“nofoltol> this complement.

这在Firefox(13)中是完全有效的,但在Chrome(21)和IE(9)中,#foter被进一步推下页面,加上一个垂直滚动条。我想这与我的#lobper内部使用垫子和边距有关,但是我无法将手指具体放在这个问题上。我非常希望得到一些帮助。

工地结构:

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

以及相关的中央安全委员会:

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

也可以在页脚前添加一个推分。这将把页脚往下拉。

Answer 2

我注意到了引起一些问题的几件事。您连接到的教程在工作时被标记为恶意的,所以我总是使用" rel="nofollow">Ryan Fait s CSS Sticky footer Tourment 。

正在检查您从我注意到的一些差异中得到了什么。首先, 您需要将 html 体和高度设置为100%, 才能在所有浏览器中运行。其次, 您的粘贴和边框引起了问题, 因此我创建了另一个 div, 它将包含您脚脚脚中的具体内容, 并包含挂贴和边框 cs 。

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

"http://jsfiddle.net/vE4F4/7" rel="无跟随" >Live DEMO

友情链接