2段組みのレイアウトのサンプル


この投稿は古く、修正として書き直した。→ http://blog.zaq.ne.jp/oboe2uran/article/1189/

============================
2段組みのレイアウトのサンプルは、ネット検索するとさくさん見つかるし、今更と思ったけど
フッタを着けない=書かないレイアウトのサンプルが存在しない。
段組みに table タグで書く人によく遭遇するが、やはりそれは変だろう。

float 属性を使った段組み、
フッタを着けない2段組み→ 「回り込みをどうする?」という問題になるのだけど、
回り込みを解除することなく、想定しない回り込みをしないように、、
jQuery で画面の表示状況に合わせて方側の height を調整していけばいいじゃないかということで。。。

表示したいレイアウトイメージは、、、

f:id:posturan:20160313175545j:plain



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>