为什么不是页脚100％宽度？

我期待我的页脚占据页面底部的所有水平空间，width 100%由于某种原因，它在页面中居中，似乎有我的包装特性。这里是图像（网站不活还没有，所以我不能提供一个链接）为什么不是页脚100％宽度？

enter image description here

那黑衣页脚应该占据底部所有水平的空间，我会包括代码我认为这是负责任的对于这个问题（代码简化，所以会与图像不同）。

HTML

<div class="content"> 
      <article class="content-info">Content 
      </article> 
      <aside class="sidebar"> 
       <h4>MORE INFORMATION</h4> 
       <ul> 
        <li> 
         <a href="#">Item1</a> 
        </li> 

        <li> 
         <a href="#">Item2</a> 
        </li> 
       </ul> 
      </aside> 
    </div><!-- END.content-wrapper --> 
    <div class="contact-us"> 
     <h2> 
      Have any questions for us? 
      <a href="#">CONTACT US</a> 
     </h2> 
    </div><!-- END.contact-us --> 
<div class="footer-container"> 
     <div class="wrapper"> 
      <footer class="footer"> 
       <ul> 
        <li>Tel:<span> 0000</span></li> 
        <li>Fax:<span> 0000</span></li> 
        <li>Email: <a href="mailto:[email protected]">bla</a></li> 
        <li><h1>Company Name</h1></li> 
       </ul> 
      </footer> 
     </div> 
     <!-- END.footer-wrapper --> 
     <div class="copyright"> 
      <div class="wrapper"> 
       &copy; Copyright 2013. 
      </div><!-- END.copyright-wrapper --> 
     </div> 
    </div><!-- END.footer-container -->  
     <?php wp_footer(); ?> 
     <!-- Google Analytics --> 
    </body> 
</html>

CSS

/* ========================================================================== 
    =content 
    ========================================================================== */ 

.content { 
    background-color: #fff; 
    border: 1px solid #e1e1e1; 
    padding: 30px 65px 30px 65px; 
    z-index: 999; 
    overflow: hidden; 
    box-shadow: 0 -1px 0 #ffffff inset, 
       0 -2px 0 #ebebeb inset, 
       0 -3px 0 #ffffff inset, 
       0 -4px 0 #efefef inset; 
} 

.contact-us { 
    background-color: #f9faf6; 
    padding: 30px 65px 30px 65px; 
    border-left: 1px solid #e1e1e1; 
    border-right: 1px solid #e1e1e1; 
    border-bottom: 1px solid #e1e1e1; 
    box-shadow: 0 4px 5px -5px #d3d3d3 inset; 
    clear: both; 
} 

.content-info { 
    float: left; 
    width: 590px; 
    background: red; 
    line-height: 25px; 
} 

.sidebar { 
    float: right; 
    width: 220px; 
    line-height: 25px; 
} 

/* ========================================================================== 
    =footer 
    ========================================================================== */ 


.footer-container { 
    background-color: #2a2a2b; 
    background-image: url(img/header_bg.png); 
    overflow: hidden; 
    margin-top: 25px; 
    width: 100%; 
} 

.footer { 
    border-top: 5px solid #00b2e5; 
    overflow: hidden; 
} 

.copyright { 
    background-color: #242424; 
    color: #6b6b6b; 
    width: 100%; 
} 

.copyright .wrapper { 
    padding: 7px 65px 7px 65px; 
    width: 850px; 
}

来源

2013-02-20 Ilja

里面，你可以做一个小提琴？ – dezman 2013-02-20 15:24:40

给我一秒钟。 – Ilja 2013-02-20 15:26:22

我无法用您发布的代码重现问题。你为什么不至少*尝试*缩小范围。我们不需要像'box-shadow'或'有任何问题给我们吗？'来调试这个问题。这就是所谓的“调试”，简化您的问题，直到您找出原因。 – 2013-02-20 15:26:30

.wrapper { 
width: 980px; 
margin: 0 auto; 
}

的对象是.wrapper

来源

2013-02-20 15:37:57

看来。内容，.footer容器等必须有一个共同的父某处有一个固定的宽度。宽度：100％只会使页脚与父页一样宽，而不是更宽，所以您必须将其移出页面。

来源

2013-02-20 15:27:05

从我看到它是一个wordpress theme.make确保您的页脚不在里面＃页面固定宽度和边距0自动。

div在header.php中开始，以footer.php结束。

确保您的代码有效，并且您没有未关闭的div。如果您在头有#page，页脚之前关闭它

来源

2013-02-20 15:30:42

为什么不是页脚100％宽度？

回答

相关问题