Question

我希望我的页脚占据页面底部的所有水平空间，width 100% BUt由于某种原因它在页面中心并且似乎具有我的包装器的特征。这是图像（网站尚未生效，因此我无法提供链接）

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;
}

Answer 1

从我看到它是一个wordpress主题。确保你的页脚不在#page内，其中固定宽度和边距为0自动。

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

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

Answer 2

似乎.content，.footer-container等必须在某个具有固定宽度的公共父级。 width：100％只会使页脚与父页面一样宽，而不是更宽，所以你必须把它移到外面。

Answer 3

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

该对象位于.wrapper

内

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

3 个答案: