javascript - 从容器继承高度？

Question

我正在构建一个 wordpress 网站，我希望边栏的高度与容器的高度相同。

像这样:

但是，有些页面看起来像这样:

这是当前的 CSS:

 #secondary .widget_nav_menu{
    background:url(xxxsbbg.png) repeat-y;

    width:270px;
    height:auto;
    margin-left:-50px;
    padding-bottom:400px;
    padding-top:20px;

    }
    #savusumo{
    background:url(xxxsavusumo.png);
    height:341px;
    width:361px;
    position:absolute;
    bottom:50px;
    left:-120px;
    }

#secondary .menu a{
color:white;
}
#secondary .menu{
list-style:none;
}
#secondary .menu .menu-item{


}
#secondary .sub-menu{
list-style:none;
}
.valittu{
width:100px;
background:red;
}
#secondary .menu-item{
margin:10px; 0px;
}

我试过 height:100%; 但看起来几乎一样。而使用inherit会继承div#secondary的高度，而我需要继承#primary的高度。可能吗？

侧边栏:

<div id="secondary" class="widget-area" role="complementary" style="position:relative;">
            <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

                <aside id="archives" class="widget">
                    <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
                    <ul>
                        <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
                    </ul>
                </aside>

                <aside id="meta" class="widget">
                    <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
                    <ul>
                        <?php wp_register(); ?>
                        <li><?php wp_loginout(); ?></li>
                        <?php wp_meta(); ?>
                    </ul>
                </aside>

            <?php endif; // end sidebar widget area ?>

            <div id="savusumo"></div>
        </div><!-- #secondary .widget-area -->

Answer 1

使用display: table;

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

.container{ display: table; overflow: hidden; }
.left, .right { display: table-cell; }

编辑:

这是一个JSFiddle使用 jQuery 且不显示:表格；