0

我正在构建一个 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 -->
4

2 回答 2

2

利用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; }

编辑：

这是一个带有 jQ​​uery 且不显示的JSFiddle：表；

于 2012-09-29T16:10:04.833 回答
0

好的，所以在您发表评论后，我假设您使用的是 211 模板，这是您安装 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）

现在查看这个文件，它包含 DOCTYPEhtml和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/

于 2012-09-29T19:08:57.470 回答