この投稿は古く、修正として書き直した。→ http://blog.zaq.ne.jp/oboe2uran/article/1189/
============================
2段組みのレイアウトのサンプルは、ネット検索するとさくさん見つかるし、今更と思ったけど
フッタを着けない=書かないレイアウトのサンプルが存在しない。
段組みに table タグで書く人によく遭遇するが、やはりそれは変だろう。
float 属性を使った段組み、
フッタを着けない2段組み→ 「回り込みをどうする?」という問題になるのだけど、
回り込みを解除することなく、想定しない回り込みをしないように、、
jQuery で画面の表示状況に合わせて方側の height を調整していけばいいじゃないかということで。。。
表示したいレイアウトイメージは、、、
CSSは、以下のとおり、、クラスセレクタではなく、idセレクタを使うパターンにしている。
html, body{
margin: 0; padding: 0;
height: 100%;
background-color: #fcfcf0; /* コンテンツと同じ背景色にする */
}
#header{
width: 100%; /* ヘッダーは、幅フルにする。*/
background-color: #bbf0ff;
height: 60px;
}
#navigator{
float: left;
min-height: 100%; /* ナビゲータ高さの最小を合わせてフルにる */
word-wrap: break-word; /* 横スクロールさせるなら、keep-all / break-all を指定 */
width: 200px;
background-color: #cecece;
}
#content{
min-height: 100%; /* コンテンツ高さの最小を合わせてフルにる */
margin-left: 200px; /* 左側マージンをナビゲータの幅だけ取得する */
background-color: #fcfcf0;
}
HTMLの body タグの中に書くものは、、、
<div id="header">
<div>
<h1>header</h1>
</div>
</div>
<div id="navigator">
<div>
<h3>navigator</h3>
<ul>
<li><a href="#">Page-1</a></li>
<li><a href="#">Page-2</a></li>
<li><a href="#">Page-3</a></li>
</ul>
</div>
</div>
<div id="content">
<div>
<h4>Content.............</h4>
</div>
</div>
ページロードで実行するように書くべき JavaScipt は、、
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
var fitNavigator = function(){
var navi_height = $('#navigator').height();
var content_height = $('#content').height();
if (navi_height < content_height){
$('#navigator').css("height", $('#content').height());
}
var window_height = $(window).height();
var h = window_height - $('#header').height();
if (navi_height < h){
$('#navigator').css("height", h);
}
};
fitNavigator();
$(window).resize(function(){
fitNavigator();
});
});
</script>