サイドバーとメインコンテンツの境界線

お題：作ってるサイトの、サイドバーとの境界線がうまく出せない

3カラムのページが1つ、2カラムのページがたくさん

ボーダーの位置に色をつけた細い画像を貼りこんでrepeat-y

→ダメだった
サイドバーかメインのどちらかの最大値で消えてしまう。

高さを指定してみた

ダメだった
出方は同上。

ハイクのグレーの境界線をどう出しているのか、Firebugでの領域確認と、cssのソースをみてみた

→hatena-haiku.cssの中に、
"div id=main,class=user-entries"というのをみつけた。

#containerの下にstreamというのもあるけど、これの設定は関係なし

div#main {
min-height:100%;　　　←高さの最小値設定
height:auto;
_height:100%;
margin: 0 200px;
border-right: 3px solid #ccc;　←右のborder設定
border-left: 3px solid #ccc;　←左のborder設定
}
この設定をちょっと直してパクり。

しかし、なにもおこらなかった！

高さの最小値=100%ではどうにも足りなかった。
borderの設定は効いたけど、肝心の高さが足りぬ。

高さを指定してみよう

min-height:100%;　←800pxに設定
やっつけ気味ではあるけれど、これでひとつを除く全てのページが直った
残るひとつはトップページ(3カラム)

トップページを直そう

ということで、とっても単純だが
min-height:1300px;
にしてみた
トップはサイドもメインもコンテンツが多いので、つねにこれくらいある。
→うまくいった！

まとめ

高さの最小値を設定してheight=autoにすればなんとかなる

課題

やっつけっぽいけどほんとにいいのかこれで…
もっとスマーートにできないか調べてみよう