Question

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

像这样：

How it should be

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

how it looks

这是当前的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; }

修改：

这是一个带有jQuery和NO显示的JSFiddle：table;

Answer 2

好的，所以在您发表评论后，我假设您正在使用Twenty Eleven模板，这是安装3.4.2时的默认模板。所以我查看了模板设置并找出（在非常基本的意义上）你可以执行以下操作并使用display: table技术：

主要索引模板（index.php）

将get_sidebar()功能从此模板底部移至顶部get_header()下方：

...
get_header(); 

get_sidebar(); ?>

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

这样做是“解决”布局问题。此模板使用float方法，侧边栏内容实际上是在左侧的content区域后注入的。我为此烦恼的原因之一，也是你无法伸展侧边栏的根本原因。

标题（header.php）

现在查看此文件，其中包含DOCTYPE，html和main元素标记以及head标记，这是我们正在寻找的内容。将其复制并粘贴到指定的位置：

wp_head(); // Find this and right after the close ?> tag... ?> <style> #page #main { display: table; } #page #main #secondary, #page #main #primary { display: table-cell; float: none; } #page #main #primary { margin: 0 20px; padding: 0 30px; } #page #main #primary #content { margin: 0; width: 100%; } #page #main #secondary { width: 30%; padding: 0 30px; background-color: #cff; // <<< This right here demonstrates the full height } </style> </head> <body <?php body_class(); ?>>

就是这样！嗯，实际上，有很多地方需要检查并找出其他模板中需要做什么（如果有的话）。这至少表明它可以工作，你只需要操纵get_sidebar()函数的位置并重置一些CSS设置，如float: left。

以上模板适用于我网站上的简单WP安装：

http://jfcoder.com/wp/

从容器继承高度？

2 个答案: