[CSS] divのみで縦横可変幅の縦の三段組
以前の記事「divのみの可変幅で高さが揃った縦の三段組」をさらに発展させて「divのみで縦横可変幅の縦の三段組」を作ってみました。( ￣▽￣)ﾉ
もちろん三段組の高さは揃えた状態で、画面一杯まで上下左右共に伸縮するもので。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
もちろん三段組の高さは揃えた状態で、画面一杯まで上下左右共に伸縮するもので。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
ソースコードは、次の通り。
ページ幅の最小幅を600pxとしていますが、コメントのwidth:800pxを有効にすることで、画面中央の横幅固定へと変更可能としています。
またヘッダーとフッターは共に高さ20pxで固定し、それぞれの上下の枠＋余白の合計高さ48pxを差し引くことで、中央の最小高さを画面サイズぴったりになるようにしています。
IE6を意識しなければ、かなりスッキリした記述になりそうなんだけどねぇ。。。結構やり甲斐ありましたｗ
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_3columns_vert_just_3.html(別ウィンドウ表示)
■関連過去記事
・divのみで可変幅の高さが揃った縦の三段組
・divのみで縦の三段組(高さ揃え)
<!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>
|
またヘッダーとフッターは共に高さ20pxで固定し、それぞれの上下の枠＋余白の合計高さ48pxを差し引くことで、中央の最小高さを画面サイズぴったりになるようにしています。
IE6を意識しなければ、かなりスッキリした記述になりそうなんだけどねぇ。。。結構やり甲斐ありましたｗ
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_3columns_vert_just_3.html(別ウィンドウ表示)
■関連過去記事
・divのみで可変幅の高さが揃った縦の三段組
・divのみで縦の三段組(高さ揃え)
| 固定リンク
「HTML・CSS・JS関連」カテゴリの記事
- [Canvas]Windowサイズに合わせてCanvasをリサイズ(2016.08.01)
- [Web作成] 通知メッセージ(2016.05.04)
- [JS] ストップウォッチ(2013.08.26)
- [Web作成] アコーディオンメニュー(2012.07.04)
- [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ(2012.05.22)
この記事へのコメントは終了しました。
コメント