Question

我不能为我的生活找出为什么我的页脚出现在我的网页中间。我将#content div设置为100％的高度并给它一个相对位置;我甚至在底部添加了一个绝对位置：0;。我错过了什么？我无法弄清楚是什么导致它不遵循页面中正常的元素流！

我已经检查了几个有同样问题的帖子，但这个建议几乎总是我上面尝试过的。我确实试图摆脱#content和页脚的位置，而是设置display：inline-block;对于两者（在另一篇文章中提出），并没有做任何事情。

链接到我正在进行的页面：http://freshcardsite.thewelllovedlife.com/home-use/

页面的HTML（从标题下方开始）：

<div class="site-content-contain">
<div id="content" class="site-content">
<div class="wrap">
<div id="primary" class="content-area">
    <main id="main" class="site-main consumer-page" role="main">

    <?php

    // vars
    $topsection = get_field('consumer_top_image_section');  

    if( $topsection ): ?>
        <div class="top-image" style="background-image: url(<?php echo $topsection['consumer_background_image']; ?>); background-size: cover; background-repeat: no-repeat; background-position: bottom center;">

            <div class="top-section">
                <div class="top-text">
                    <h1>Fresh Card</h1>
                    <p><?php echo $topsection['consumer_top_content']; ?></p>
                    <img src="<?php echo $topsection['consumer_top_icon']; ?>" />
                </div>  
            </div>

        </div>

    <?php endif; ?>

    <?php

    // vars
    $aboutsection = get_field('consumer_about_section');    

    if( $aboutsection ): ?>
        <div class="about-section">

            <div class="about-content">
                    <h2><?php echo $aboutsection['consumer_about_section_title']; ?></h2>
                    <p><?php echo $aboutsection['consumer_about_section_main_content']; ?></p>
            </div>

            <?php if($aboutsection['consumer_uses_section'] ): ?>

                <div id="tabs">

                        <ul class="tabs">

                        <?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
                            <li><a href="#<?php echo $use['consumer_use_number']; ?>"><h3><?php echo $use['consumer_use_name']; ?></h3><img src="<?php echo $use['consumer_use_icon']; ?>" /></a></li>

                        <?php endforeach; ?>
                        </ul>

                        <?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
                            <div id="<?php echo $use['consumer_use_number']; ?>">
                                <p> <?php echo $use['consumer_use_information']; ?> </p>
                                <p> <?php echo $use['consumer_use_video']; ?</p>
                                <p> <?php echo 
$use['consumer_second_use_video']; ?> </p>
                            </div>
                        <?php endforeach; ?>
                </div>

            <?php endif; ?>
        </div>
    <?php endif; ?>

    <div class="contact-section">
        <div class="contact-content">
            <h2>Contact Us</h2>
            <?php the_field('consumer_contact_section'); ?>
        </div>
    </div>

<?php if (have_posts() ) : ?>

    <div class="news-section">
        <div class="news-content">
            <h2>Awards & News</h2>
            <ul>

                <?php $the_query = new WP_Query( 'posts_per_page=5' ); ?>


                <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>


                <li><a href="<?php the_permalink() ?>"><?php the_title(); ?>
</a></li>


                <li><?php the_excerpt(__('(more…)')); ?></li>


                <?php endwhile; wp_reset_postdata(); ?>
            </ul>
        </div>
    </div>

    <?php else : ?>

    <?php endif; ?>

    </main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->

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

    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="wrap">
            <?php
            get_template_part( 'template-parts/footer/footer', 'widgets' );

            if ( has_nav_menu( 'social' ) ) : ?>
                <nav class="social-navigation" role="navigation" aria-label="
<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
                    <?php
                        wp_nav_menu( array(
                            'theme_location' => 'social',
                            'menu_class'     => 'social-links-menu',
                            'depth'          => 1,
                            'link_before'    => '<span class="screen-reader-text">',
                            'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
                        ) );
                    ?>
                </nav><!-- .social-navigation -->
            <?php endif;

            get_template_part( 'template-parts/footer/site', 'info' );
            ?>
        </div><!-- .wrap -->
    </footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->

这是我的相关CSS

html, body {
height: 100%;
}

.consumer-page {
    min-width: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    top: 0;
}

#content {
    position: relative;
    height: 100%;
    min-height: 100%;
}

footer#colophon {
    position: absolute;
    bottom: 0;
}

Answer 1

你的主要问题是，.consumer-page正在获得position:absolute并且它正在弄乱你的元素高度

让我们尝试下一个课程：

.consumer-page {
    min-width: 100%;
    margin: 0 auto;
    position: initial;
    left: 0;
    top: 0;
}

.wrap {
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
}

#content {
    padding: 0;
}


footer#colophon {
    position: initial;
    bottom: 0;
}

希望这会有所帮助。如果你遇到问题，请在这个答案上发表意见并愉快地编辑

页脚即使设置了位置，也会在内容上显示

1 个答案: