html - 外部容器/内容图像的高度问题

Question

您好，我正在修改一个 Wordpress 主题，我在定位为内容的中间部分提供边框的外部容器图像时遇到了一些问题。问题是背景图像没有随内容一起扩展，而是停在浏览器屏幕的底部。该站点位于此处:http://www.richmindonline.com/test

我以前从未以这种方式构建背景图片，所以我为我对这个问题的天真感到抱歉。

这是背景图像结构的 CSS id:

 #main {border:1px solid blue; width:900px; display:block; margin:0px auto;}

#container {
        width: 600px;
    float:left;
    border:0px solid red;
}

#content-before {
    border:0px solid yellow;
    content:"";
    position:absolute;
    display:block;
    top:150px;
    left:185px;
    bottom:0px;
    width:20px; 
    height:auto;
    background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') 0px 0px repeat-y;

}


#content {
width:590px;
    border:0px solid green;
    }


#primary {
float:right;
overflow: hidden;
width: 250px;
    border:1px solid brown;
}


#content-after {
    border:0px solid yellow;
    content:"";
    float:left;
    position:absolute;
    display:block;
    top:150px;
    left:1145px;
    bottom:0px; 
    width:20px; 
    height:auto;
    background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') -20px 0px repeat-y;
}

#footer {
clear: both;
width: 100%;
}

这是我的 index.php HTML div 结构:

<?php get_header(); ?>

<div id="container">

  <div id="content-before"></div><!-- #content-before-->
         <div id="content">




             <?php /* Top post navigation */ ?>
             <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
                <div id="nav-above" class="navigation">
                   <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
                   <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
                </div><!-- #nav-above --><?php } ?>




             <?php /* The Loop — with comments! */ ?>
             <?php while ( have_posts() ) : the_post() ?>
             <?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>
                <div id="post-<?php the_ID(); ?>" 
                    <?php post_class(); ?>>
                    <?php /* an h2 title */ ?>
                <h2 class="entry-title">
                    <a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a>
                </h2> 

                     <?php /* Microformatted, translatable post meta */ ?>
                <div class="entry-meta">
                    <span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
                    <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
                    <span class="meta-sep"> | </span>
                    <span class="meta-prep meta-prep-entry-date">
                          <?php _e('Published ', 'your-theme'); ?></span>
                    <span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
                          <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
                </div><!-- .entry-meta --> 

                          <?php /* The entry content */ ?>

                                 <div class="entry-content">
                                    <?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'your-theme' )  ); ?>
                                    <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>');?>                                    </div><!-- .entry-content --> 

                                    <?php /* Microformatted category and tag links along with a comments link */ ?>

                <div class="entry-utility">
                    <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links">
                        <?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?>
                    </span>                        

                    <span class="meta-sep"> | </span>

                        <?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
                    <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>                

                        <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
                </div><!-- #entry-utility -->


            </div><!-- #post-<?php the_ID(); ?> --> <?php /* Close up the post div and then end the loop with endwhile */ ?>
   <?php endwhile; ?>

         <?php /* Bottom post navigation */ ?>
         <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
            <div id="nav-below" class="navigation">
                <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
                <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
            </div><!-- #nav-below --><?php } ?>

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

      <div id="content-after"></div>

    </div><!-- #container -->



     <div id="primary" class="widget-area">
    </div><!-- #primary .widget-area -->



<?php get_sidebar(); ?>
<div style="clear:both"></div>


<?php get_footer(); ?>

Answer 1

您用来尝试将外部列拉伸(stretch)到页面全长的最小高度值 100% 不起作用，因为它会返回浏览器窗口高度。

也许发布您的模板文件的代码以便我们可以轻松查看您的 div 结构将有助于提供解决方案。