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

私が見たところ、それはワードプレスのテーマです。フッターが固定幅とマージン 0 自動の #page 内にないことを確認してください。

その div は header.php で始まり、footer.php で終わります。

コードが検証され、閉じられていない div がないことを確認してください。ヘッダーに #page がある場合は、フッターの前に閉じます

于 2013-02-20T15:30:42.923 に答える
2 
.wrapper {
width: 980px;
margin: 0 auto;
}

オブジェクトは .wrapper の中にあります

于 2013-02-20T15:37:57.027 に答える
2

.content、.footer-container などには、固定幅を持つ共通の親がどこかにある必要があるようです。width: 100% は、フッターをその親と同じ幅にするだけで、幅を広くしないため、外側に移動する必要があります。

于 2013-02-20T15:27:05.667 に答える