Question

我似乎无法找到这个边距来自CSS的位置，它在每个网页底部大约30px的边距

http://www.beatinganger.com/

任何帮助都值得赞赏 - 我知道它很简单，但我的思绪现在已经很长了......

这是页脚的CSS。

#footer{float:left; width:100%; margin-bottom:0px; border:0px solid #cccccc;  background: #333; border-top:0px solid #f0f0f0;
margin-top: 0px;
font-size: 13px;
line-height: 20px;
color: #BBB;
padding-top: 25px;
}

#footer-inner {
width: 966px;
margin: 0 auto;
}

#footer ul {
margin: 0;
padding: 1em 0 2em 0;
}

#footer ul li {
list-style-type: none !important;
list-style-image: none !important;
padding: 0;
margin: 0;
}

#footer a{
    color: #BBB;
    text-decoration: none;

}

#footer a:hover { 
    text-decoration: none;
    color: #fff;
    background-color: #f7ab31;
    }

#footer h2 {
color: white;
font-size: 22px;
}


#footerbottom {
width:966px;
padding-left: 10px;
    margin-top: 40px;
}





#footerbottom .copyright  {

    width: 400px;
    font-weight: normal;
    left: 0;
    color: #999;
    font-size: 11px;
    font-family: arial, helvetica, sans-serif;

}

#footerbottom a{

    color: #000;
    text-decoration: none;

}

#footerbottom a:hover { 
    text-decoration: none;
    color: #fff;
    background-color: #f7ab31;
    }

#footer .left_content{float:left; width:180px; margin-right: 40px;}

#footer p{float:left;  padding:30px 0 0; 
line-height: 18px;
    font-family: arial, helvetica, sans-serif;
    font-style: normal;
    font-size:12px;
    color:#000;
}

#footer .left_content2{float:left; width:180px; padding-left:0px; margin-right: 40px;}

#footer .left_content3{float:left; width:180px; padding-left:0px;}



#footer .right_content{float:right; width:200px; padding:25px 10px 0 0;}
#footer .right_content img.british_logo{float:right;}
#footer .right_content ul{float:right; width:85px; list-style:none;}
#footer .right_content li{float:left; width:auto; padding-right:5px;}
#footer .right_content li.last{padding-right:0;}
#footer .block-system{display:none}

由于

Answer 1

将overflow: hidden添加到#footer。

编辑：稍微弃绝一点：我的拙见是float已被过度使用，如果是，它通常只会导致问题。我不明白做float: left; width: 100%;的重点。我对CSS采用极简主义的方法 - 只有在我确定需要时才添加样式规则，并且从不使用我不理解的规则。使调试样式更容易。

顺便问一下...... IE的故事是什么？它看起来很可怕 - 就像根本没有使用样式表一样。

Answer 2

div＃footer-inner＆gt; div.copyright＆gt; div＃block-block-81被分配class =“clear-block”

这是你的罪魁祸首：

.clearblock:after{
content:".";
}

可能。

你有很多事情要做。但仅删除该内容添加可以解决问题。

答案 2 :(得分：0)

~~#footer p上有30像素的顶部填充。~~

我会为你缩小范围，但你在该页面上有大约43个外部样式表。

修改

在OP的解释之后，那不是填充。它实际上是18像素的白色，最底部的在页脚下。

我同意用户语法错误...根本原因似乎是由类.引起的页脚下的“句点”.clearblock:after。

答案 3 :(得分：0)

尝试从.clear-block：{}后删除height: 0;。这应该解决问题

答案 4 :(得分：0)

实际上答案可能在你的包装
中
查看页面源代码我看到你的页脚没有包含在包装器中但是在html中你指出包装器在页脚后结束。右键单击chrome并检查哪些元素包含包装并正确关闭它，您的问题可能会消失。

<!-- wrapper starts -> <div id="wrapper">....</div> <--- here the wrapper ends <div id="footer"> ....</div> <---- it suposed to be here the end <!-- wrapper ends ->

应该是这样的

<!-- wrapper starts -> <div id="wrapper">.... <div id="footer"> ....</div> </div> <!-- wrapper ends ->

Answer 3

~~#footer p上有30像素的顶部填充。~~

我会为你缩小范围，但你在该页面上有大约43个外部样式表。

修改

在OP的解释之后，那不是填充。它实际上是18像素的白色，最底部的在页脚下。

我同意用户语法错误...根本原因似乎是由类.引起的页脚下的“句点”.clearblock:after。

Answer 4

尝试从.clear-block：{}后删除height: 0;。这应该解决问题

Answer 5

实际上答案可能在你的包装

中

查看页面源代码我看到你的页脚没有包含在包装器中但是在html中你指出包装器在页脚后结束。右键单击chrome并检查哪些元素包含包装并正确关闭它，您的问题可能会消失。

<!-- wrapper starts ->
<div id="wrapper">....</div>  <--- here the wrapper ends
<div id="footer"> ....</div>  <---- it suposed to be here the end
<!-- wrapper ends ->

应该是这样的

    <!-- wrapper starts ->
    <div id="wrapper">....
      <div id="footer"> ....</div>
    </div>
    <!-- wrapper ends ->

无法摆脱网站底部的保证金？

5 个答案: