0

ワードプレスサイトを構築していますが、サイドバーの高さをコンテナと同じにしたいです。

このような：

それがどうあるべきか

ただし、一部のページは次のようになります。

それがどのように見えるか

現在の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; }

編集：

これは、jQueryを使用して表示されないJSFiddleです。

于 2012-09-29T16:10:04.833 に答える
0

さて、あなたのコメントの後、私はあなたがTwentyElevenテンプレートを使用していると仮定しています。これは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私がこのテクニックに悩まされる理由の1つであり、サイドバーを伸ばすことができない根本的な原因でもあります。

ヘッダー（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/

于 2012-09-29T19:08:57.470 に答える