html - 为什么页脚不是 100% 宽度？

<分区>

我希望我的页脚占据页面底部的所有水平空间，width 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:nla@bla.com">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;
}

最佳答案

据我所知，这是一个 wordpress 主题。确保您的页脚不在#page 内，它具有固定宽度和边距 0 auto。

那个 div 从 header.php 开始到 footer.php 结束。

确保您的代码有效并且您没有未关闭的 div。如果页眉中有#page，请在页脚之前将其关闭

关于html - 为什么页脚不是 100% 宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14983450/