[CSS] divのみで可変幅の高さが揃った縦の三段組
昨日に引き続き、さらに表示方法を発展させた「divのみの可変幅で高さが揃った縦の三段組」を作ってみました( ̄▽ ̄ )ゞ すなわちページ幅一杯まで伸縮する縦の三段組です。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
header
1
2
3
2
3
1
2
3
4
5
6
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
ソースコードは、次の通り。
CSS内で、先頭に"_"を付けているプロパティ(ソースでは_widthや_display)は、IE6のみに作用するプロパティとなります。
またページ最小幅を600pxとしていますが、min-widthと_widthを削除してwidth:800pxと宣言しなおせば、前回記事とほぼ同じ表示となりますが、IE6で動作させた場合のみ縦組左右の余白が若干広くなります。
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_3columns_vert_just_2.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; padding:0px; height:100%;} #page {margin:0px auto; min-width:600px;} #page {_width:expression(document.body.clientWidth<602?"600px":"auto");} #header {min-height:1em; margin-bottom:1px; border:1px solid #ddd;} #footer {min-height:1em; margin-top:1px; text-align:right; border:1px solid #ddd;} #columns {_display:inline-block; overflow:hidden;} #cborder {height:1px; line-height:0px; overflow:hidden;} #main {padding-bottom:32767px; margin-bottom:-32767px;} .float {_display:inline-block; _height:32767px; padding-bottom:32767px; margin-bottom:-32767px;} .side1 {float:left; width:200px; margin-right:2px; border:1px solid #ddd;} .side2 {float:right; width:200px; margin-left:2px; border:1px solid #ddd;} .main {_display:inline-block; border:1px solid #ddd; overflow-x:hidden;} --></style> </head> <body> <div id="page"> <div id="header">header</div> <div id="columns"> <div id="side1" class="side1 float">1<br>2<br>3</div> <div id="side2" class="side2 float">1<br>2<br>3<br>4<br>5<br>6</div> <div id="main" class="main">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 float"><br></div><div class="side2 float"><br></div><div class="main"><br></div></div> <div id="footer">footer</div> </div> </body> </html> |
またページ最小幅を600pxとしていますが、min-widthと_widthを削除してwidth:800pxと宣言しなおせば、前回記事とほぼ同じ表示となりますが、IE6で動作させた場合のみ縦組左右の余白が若干広くなります。
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_3columns_vert_just_2.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)
コメント