Question

我正在创建一个网站，并且在页脚的末尾有一个相当大的空白区块（几乎就像一个额外的div）我试过重写html和css但似乎没有任何帮助。网站的其他页面使用完全相同的页脚代码，但他们没有相同的问题

我会假设css不是问题，因为其他页面的工作方式可能就像我关闭我的div一样;也许一组额外的眼睛可以发现我的错误。感谢。

           <footer id="site-footer">
     <section>
    <div class="container">
        <div class="row">
           <div class="clearfix">


<div class="hidden-phone">
    <div class="span3 widget text-3 widget_text">
        <div class="widget-inner">          
            <div class="textwidget">
                <div style="text-align:center;">

                        <img src="images/2014/10/logo.png">
                            <h3>Apparel</h3>
                    <hr>
                        <p>Meet LA Apparel, a beautiful botique with remarkable details.</p>
                            </div>
                        </div>
                      </div>
                    </div>
                   </div>




       <h1>------------Collections Go here----------</h1>          




                <div class="span12 social-icons clearfix">
                            <hr>
                        <h4><small>CONNECT WITH US:</small></h4>

                                                          <a target="_blank" href="http://www.facebook.com" class="tip" data-toggle="tooltip" data-html="true" data-placement="bottom" title="Find us on Facebook"><i class="icon-facebook"></i></a>
                                                                                      <a target="_blank" href="http://www.twitter.com" class="tip" data-toggle="tooltip" data-placement="bottom" title="Find us on Twitter"><i class="icon-twitter"></i></a>
                                                                                      <a target="_blank" href="http://www.linkedin.com" class="tip" data-toggle="tooltip" data-placement="bottom" title="Find us on LinkedIn"><i class="icon-linkedin"></i></a>
                                                                                      <a target="_blank" href="http://www.pinterest.com" class="tip" data-toggle="tooltip" data-placement="bottom" title="Find us on Pinterest"><i class="icon-pinterest"></i></a>

               </div>
            </div>
           </div>
        </div>
     <HR>
                <div class="span12 clearfix">
                    <p class="pull-left">&copy;LA Apparel</p>
                                    </div>
            </footer>
        </section>   
    </body>
</html>



    #site-footer {
  background-color: #ecf0f1;
  padding: 40px 0 15px;
  position: relative;
}
#site-footer a {
  color: #2980b9;
}
#site-footer a:hover {
  color: #ae9e90;
}
#site-footer #category-accordion > li a.accordion-collapser {
  font-size: 14px;
  font-weight: 300;
}
#site-footer #category-accordion > li > ul > li > a {
  font-size: 13px;
  padding: 1px 6px;
}
#site-footer #category-accordion > li > ul > li:last-child > a {
  padding-bottom: 10px;
}
#site-footer h4 {
  margin-top: 0px;
}
#site-footer .social-icons a {
  padding: 5px;
}
#site-footer p {
  font-size: 14px;
  line-height: 20px;
}
#site-footer hr {
  border-color: #F3F3F3 -moz-use-text-color #E3E3E3;
  border-top: 1px solid #333;
  border-bottom: 1px solid #212625;
}
#site-footer .blog-posts article {
  border-bottom: 1px solid #E3E3E3;
  padding: 10px 0 0;
}
#site-footer .blog-posts article:first-child {
  padding-top: 0px;
}
#site-footer .blog-posts article:last-child {
  border-bottom: none;
}

enter image description here

Answer 1

未给出CSS代码。但你可以尝试改变

<p class="pull-left">&copy;LA Apparel</p>

要

<div class="pull-left">&copy;LA Apparel</div>

由于p标签边缘顶部和底部是16px。或者你可以将你的css保留为p标签边距

如何从页脚下方删除挤出白色区域

1 个答案: