php - 背景图像不显示在页脚中

Question

我正在一个 wordpress 网站http://cardinalmma.com/wordpress/上工作。您可以看到由瓷砖组成的背景图像。但是该图像不会在页脚中显示为背景。这是主页模板

<?php
/*
Template Name: Home template
*/
include('header.php'); ?>

<div id="background">


        <div id="home_primary">
            <div id="content" role="main">


<div id="social_icons">
<div id="facebook">
</div>
<div id="twitter">
</div>
<div id="linkedin">
</div>
<div id="rss">
</div>

</div>
<div style="clear:both"></div>  

                <div id="text_back">
                <div id="brad">
                </div>

                <div id="text">

                <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php endwhile; // end of the loop. ?></div> 

                <div id="twitter_feed">
                </div>
                </div>

<div id="bottom">
</div>



</div><!-- #content -->
        </div><!-- #primary -->




<?php get_footer(); ?>

这是页脚

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>





            <?php
                /* A sidebar in the footer? Yep. You can can customize
                 * your footer with three columns of widgets.
                 */
                if ( ! is_404() )
                    get_sidebar( 'footer' );
            ?>




                <div id="footer">
                <div id="wrap" style="width:1000px;margin-left:auto;
margin-right:auto;">


                <div id="bottomMenu">
                 <div align="center" style="font-family: Calibri;font-size: 25px;text-transform: uppercase;color: #e61e25;">Navigate</div>

                <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>
                </div>
                <div id="contacts">
                <div align="center" style="font-family: Calibri;font-size: 25px;text-transform: uppercase;color: #e61e25;">Contacts</div>
                </div>


                <div id="copyright">
                2013 © – <a href="http://cardinalmma.com" target="_blank">cardinalmma.com</a> – All Rights Reserved </div>






                </div>


                </div>
            </div>

</div><!-- #page -->

<?php wp_footer(); ?>





</div>
</body>
</html>

CSS很大，所以我不附加。

谁能帮帮我吗。谢谢

Answer 1

这是因为您正在浮动页脚中的元素 - 当浮动元素时，它们会从文档流中取出，导致父级崩溃。

为了防止这种情况，您可以使用micro-clearfix 方法：

#footer:before,
#footer:after {
    content: " ";
    display: table;
}

#footer:after {
    clear: both;
}

…或overflow: hidden;在父级上使用（这更简单，但可能不适用于所有情况）：

#footer {
    overflow: hidden;
}