サイドバーエリアの延長について

方法はいくつかありますが、可能です。

プラン A)Simplicityで言う所の#mainの高さを取得して、#sidebarのheightに入れれば高さは同じになります。
ただこれでやってしまうとスクロール追従部分がややこしいことになるので問題が出てきてしまいます。

プラン B)#mainを囲む#body-inあたりから、表示形式をflex-boxにして、ストレッチプロパティで縦の高さを同じにすると言うことが可能です。cssは大幅に変更することになると思いますがこちらの方が比較的簡単かと思います。

プランAの場合、#sidebarは追従させたいので、それを囲むラッパーを作るほうが良いと思います。それの高さを#mainと同じにして、背景を設定すればリンク先のようなサイトデザインができると思います。
ラップする方法は、子テーマあたりのjavascript.jsに、

$(function(){
$(“#sidebar”).wrap(“<div class=’ラッパーのクラス名’ />”);
});
とでも設定すれば、

<div class="ラッパーのクラス名">
  <div id="sidebar">
  ...何かしらの処理
  </div>  
</div>

このようになります。※ またクォートが文字化けしているかも知れません（笑）
後は、ラッパーのクラス名に対してcssでデザインすれば良いと思います。こうすることで元のテーマが書き出す構造を維持したまま#sidebarを囲むことができます。

プランBの場合、

極簡単な例をjsfiddleに書いておきました。→flex boxの例
ベンダープレフィックスを入れてないので、chromeで見て下さい。IEとかfirefoxの場合はプレフィックスを追加することで対応できます。スマホなどの場合は、古い書き方が必要な場合もありますので注意です。

このようにflex-boxでレイアウトしておくと、ブラウザ幅が狭まれば自動で#mainの下に#sidebarが潜り込むのも便利な点です(レスポンシブにすぐできる)。
#mainの flex: 1 250px; の部分で、#mainの横幅を250pxで設定して、#sidebarはその残りのスペースを勝手に幅と設定してくれます。
ブラウザの幅が#mainの250pxより狭くなった場合は#sidebarが#mainの下に回りこむ、つまりflex-flow: xxx wrapの部分です。nowrapにすれば、回り込みません。

質問にあった、#mainと#sidebarを同じ高さにすると言う所は、align-items: stretch;で対応しています。

#headや、#navi等にもflexを設定する場合は#containerにdisplay: flex;等を入れればよいですが、#containerに入れる場合は、flex-flowはrowではなくcolumnにしてそれぞれに縦並びにしてから、#body-inに再度display: flex;を設定し、flex-flow: row wrap;を設定します。#mainと#sidebarは横並びで、その他の要素は縦並びということです。

Simplicityの場合、#containerとfooterが分離しているので、footerに対しては、別に設定が必要になりますが基本的な考えは同じです。

追加で、Simplicityは色んな箇所でfloatが使われています。floatとは文字通り浮いているような状態で、それ自体は高さを持たないので、回り込み解除させるために、clearfix等でclear:bothや、その他色々な事が行われています。

flex-boxにした場合、それらが逆に問題になる場合があるので、現在のcssデザインは絶対別に保存してから新たにデザインしていくことをオススメします。

あ、忘れてた。高さを取得する場合は、

$(“#main”).height();
あるいは、
$(“#main”).outerHeight();
で取得できます。
サイドバーのラッパーに高さを持たせるには、

var main_height = $(“#main”).outerHeight();
$(“#sidebar-wrapper”).css({ height: main_height });

みたいな感じでしょうか。試してませんけど、こんな感じです。
ラップした後に追記するようになると思います。

height()とouterHeight()の違いは、ボーダーやパディング、マージンの幅を取得するかどうかです。参考: .outerHeight() (jsStudio)

うおっ、tabを押してしもたらついでにenterも押してしまったので、続きを書いておきます。

これ実はこれだけだと問題が出る場合があります。#mainより、#sidebarが大きくなってしまった場合です。
常に、#mainの高さを取得しますから、#sidebarが大きくなった場合は#sidebarに問題が発生します。

そのため、#mainの高さと#sidebarの高さを取得してif else文あたりで、条件分岐する必要があります。

#main >= #sidebar の時は、#mainの高さを#sidebar-wrapperに入れる
#main < #sidebar の時は、#mainに#sidebarの高さを入れるか、何もしないか・・・このあたりはデザイン次第です。また、ブラウザの幅をリサイズした時に問題となる場合もありますので、$(window).resizeでブラウザ幅を監視する必要も出てきます。

こういった感じから、細かく制御したい場合、jQueryでは案外大変になることがあるわけです。
flex-boxは対応していないブラウザに対しては、対応しているブラウザで見てくれとしか言えませんし、IEのベンダープレフィックスを付けたとしても古いIEは対応できないでしょうし、まぁどっちにしてもメリット・デメリットはあります。

完全回避するには、テーブルでレイアウトするとかかもしれませんが、Googleに「何やってんだよ」と評価を落とされる原因にもなりかねませんし、完全に対応するには、Simplicityの各phpが吐き出す内容を変更・改造しつつ、リンク先のcssをお手本に改造するしか無いと思います。

hidekichiさん
わいひらさん

ご丁寧にありがとうございます。
ご教示いただいた方法を試してみます。

取り急ぎ。

ついでに書いておくと、flex-boxには、orderと言うプロパティがありまして、Simplicityでサイドバーを左にするというカスタマイザーの設定があったと思いますが、それが簡単に実現できます。

#main {
 //何かしらの処理
  order:2;
}

#sidebar {
  //何かしらの処理
  order:1;
}

#sidebarのorder:1は不要かも知れません。 前述したjsFiddleにorderを入れたものをアップデートしておきました。