« [CSS] ブロック要素を画面中央に表示 | トップページ | [雑誌] シューティングゲームサイド VOL.02 »

2011年6月27日 (月)

[CSS] divのみで縦横可変幅の縦の三段組

以前の記事「divのみの可変幅で高さが揃った縦の三段組」をさらに発展させて「divのみで縦横可変幅の縦の三段組」を作ってみました。(  ̄▽ ̄)ノ
もちろん三段組の高さは揃えた状態で、画面一杯まで上下左右共に伸縮するもので。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。

Html_

ソースコードは、次の通り。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css">
<title>縦横可変幅の縦の三段組</title>
<style type="text/css"><!-- 
html, body {margin:0px; height:100%;}
#page {margin:0px auto; min-width:600px; /*width:800px;*/ height:100%;}
#page {_width:expression(document.body.clientWidth<(parseInt(currentStyle['min-width'])+2)?currentStyle['min-width']:"auto");}
#header {height:20px; margin-bottom:2px; border:1px solid #ddd;}
#footer {height:20px; margin-top:2px; text-align:right; border:1px solid #ddd;}
#columns {_display:inline-block; min-height:100%; _height:100%; overflow:hidden; _overflow:visible; margin-top:-48px;}
#columns .vert {margin-top:48px;}
#cborder {height:1px; margin-top:-1px; overflow:hidden;}
.vert {_display:inline-block; height:100%; _height:auto; margin-bottom:-32767px; padding-bottom:32767px; border:1px solid #ddd;}
.side1 {float:left; width:200px; margin-right:2px; _margin-right:0px;}
.side2 {float:right; width:200px; margin-left:2px; _margin-left:0px;}
.main  {overflow-x:hidden;}
--></style>
</head>

<body>
<div id="page">
  <div id="header">header</div>
  <div id="columns">
    <div id="side1" class="side1 vert">1<br>2<br>3</div>
    <div id="side2" class="side2 vert">1<br>2<br>3<br>4<br>5<br>6</div>
    <div id="main" class="main vert">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>
  </div>
  <div id="cborder"><div class="side1 vert"><br></div><div class="side2 vert"><br></div><div class="main vert"><br></div></div>
  <div id="footer">footer</div>
</div>
</body>
</html>
ページ幅の最小幅を600pxとしていますが、コメントのwidth:800pxを有効にすることで、画面中央の横幅固定へと変更可能としています。
またヘッダーとフッターは共に高さ20pxで固定し、それぞれの上下の枠+余白の合計高さ48pxを差し引くことで、中央の最小高さを画面サイズぴったりになるようにしています。
IE6を意識しなければ、かなりスッキリした記述になりそうなんだけどねぇ。。。結構やり甲斐ありましたw

実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_3columns_vert_just_3.html(別ウィンドウ表示)

■関連過去記事
divのみで可変幅の高さが揃った縦の三段組
divのみで縦の三段組(高さ揃え)

|

« [CSS] ブロック要素を画面中央に表示 | トップページ | [雑誌] シューティングゲームサイド VOL.02 »

HTML・CSS・JS関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: [CSS] divのみで縦横可変幅の縦の三段組:

« [CSS] ブロック要素を画面中央に表示 | トップページ | [雑誌] シューティングゲームサイド VOL.02 »