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

用于尝试将外部列拉伸到页面的整个长度的最小高度值100％无效，因为它返回浏览器窗口高度。

也许发布模板文件的代码，这样我们就可以很容易地看到你的div结构有助于提供解决方案。

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

1 个答案: