为什么我的页脚没有粘到底部?

时间:2013-02-12 03:42:38

标签: html css

body {
    background: #ffffff;
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
height: 100%;
margin: 0;
padding: 0;
}

#container {
    width: 50%;
    background: #fff;
    border: none;
    color: #000000;
    margin: auto auto;
    padding: 20px;
    text-align: left; /* IE 5 fix */
overflow:auto;
padding-bottom: 180px
}

#wrap {
min-height: 100%;
}

#footer {
background: #000 url(images/cbf/foot.png) repeat;
border-top: solid 1px #000;
position: relative;
width:100%;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;
}

整天都在努力,也许我的眼睛只是因为疲惫而失明。

我已经将body div合并到body标签内部,我清除了我的缓存并尝试了Chrome和firefox。

4 个答案:

答案 0 :(得分:1)

您是否尝试将bottom:0;添加到页脚?

::编辑::如果你在谈论整个页脚或只是文本,不太确定。如果你想要底部的文本,给它一个新的div / class并设置bottom:0;它会把它放在那里给你。如果您希望整个页脚位于底部,那么它已经存在于我的Firefox和Chrome中。

:: EDIT2 ::

#copyright { font: 11px Verdana, Arial, Sans-Serif; bottom: 0; padding: 10px 0 0 0; }

如果你想要底部的链接,也可以将它们添加到版权区。

这是你的页脚:

#footer {
background: #000 url(../../../images/cbf/foot.png) repeat;
border-top: solid 1px #000;
position: relative;
width:100%;
bottom: 0px;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;
}

答案 1 :(得分:1)

试试这个

#footer {
background: #000 url(images/cbf/foot.png) repeat;
border-top: solid 1px #000;
position: fixed;
bottom: 0;
width: 100%;
height: 180px;
clear: both;
}

答案 2 :(得分:0)

我认为这个课程的问题尝试下面的变化...我希望这应该工作......

#copyright {
    border: 0 none;
    bottom: 0;
    font: 11px Verdana,Arial,Sans-Serif;
    margin: 0;
    padding: 10px 0 0;
    position: relative;
    top: 110px;

答案 3 :(得分:0)

好像你的页脚高度设置为180px,这会在代码height: 180px中产生问题。

应为height: 60px