php - サイドバーとメイン コンテンツの高さを一致させるにはどうすればよいですか?

Question

現在、私は自分のウェブサイトにワードプレスを使用しています。サイドバーとメイン コンテンツ エリアの高さが一致しません。サイドバーとメイン コンテンツの高さを一致させるにはどうすればよいですか? 例 pageA には長いコンテンツがありますが、サイドバーは短いため、未使用のサイドバー領域は空白で埋められます。

以下は私のindex.phpコードです。

<?php get_header(); ?>
  <div id="table">
      <div id="mainsidebar">
          <?php get_sidebar(); ?>
      </div>
      <div id="maincontent">
          <div valign="top">
            <?php wowslider(9); ?>
          </div>
          <div valign="bottom">
            <?php include('main-content.php'); ?>
          </div>
      </div>
  </div>
<?php get_footer(); ?>
</body>

ここに私がアップロードしたサンプル画像のリンクがあります。

ありがとう。

Answer 1

JavaScript を使用してもかまわない場合:

$(function(){
    var main = $('#maincontent').height(),
        sidebar = $('#mainsidebar').height();
    if(main > sidebar){
        $('#mainsidebar').css({'min-height':main});
    }
});

Answer 2

ここに投稿されているように、CSS でこれを行うことができます。

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

HTML:

<div class="container">
    <div class="column">Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>
    </div>
    <div class="column">Something</div>
</div>

または、次のことを試してください。

From:横に並んだ 2 つのフローティング div、同じ高さ

HTML:

<div id="table">
    <div id="mainsidebar">
        <p>Main Sidebar Content</p>
    </div>
    <div id="maincontent">
        <p>Main Content</p>
    </div>
</div>​

CSS:

#table { position: relative; }

#mainsidebar { /* shorter column */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    padding: 2%;
}
#maincontent { /* taller column */
    margin: 0 0 0 42%;
    width: 58%;
}​

Answer 3

これにはequalize.jsを使用します。セットアップが非常に簡単で、素晴らしく機能します！

Answer 4

<div id="mainsidebar"></div>and<div id="maincontent"></div>を別のdivに入れます。そのdivをdivと同じ高さにしmaincontentます。そしてdivheight:100%に与えます。mainsidebar

ここからのアイデア。