0

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

在此处输入图像描述

黑色页脚应该占据底部的所有水平空间，我将包含我认为导致此问题的代码（代码简化，因此与图像不同）。

JSfiddle http://jsfiddle.net/aHpua/4/

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

3 回答 3

4

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

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

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

于 2013-02-20T15:30:42.923 回答
2

似乎 .content、.footer-container 等必须在某处具有固定宽度的共同父级。width: 100% 只会使页脚与父级一样宽，而不是更宽，因此您必须将其移到外面。

于 2013-02-20T15:27:05.667 回答
2 
.wrapper {
width: 980px;
margin: 0 auto;
}

该对象位于 .wrapper 内部

于 2013-02-20T15:37:57.027 回答