[CSS] divのみで縦の三段組(高さ揃え)
つい最近、たまたま知恵袋を見たら「divのみでそれぞれ内容量の異なる縦の三段組の高さを揃えたい」という解決済みの質問を見かけたのですが、ベストアンサーの回答を見るとjavascriptを使わなくても、CSSのみで実現できる気がしたので試しに作ってみました。( ￣▽￣)ﾉ もちろん内容量に応じて自動で高さが揃うしくみで！
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari、Operaの現時点の日付バージョンで確認済み。
header
1
2
3
2
3
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
2
3
4
5
6
ソースコードは、次の通り。
※DOCTYPEが違うと正常動作しないと思います。
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_3columns_vert_just.html(別ウィンドウ表示)
「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">
<style type="text/css"><!--
html, body {margin:0px; padding:0px; height:100%;}
#page {margin:0px auto; width:800px;}
#header {min-height:1em; margin-bottom:2px; border:1px solid #ddd;}
#footer {min-height:1em; margin-top:2px; text-align:right; border:1px solid #ddd;}
#columns {_display:inline-block; height:auto; overflow:hidden;}
#columns div {float:left; padding-bottom:32767px; margin-bottom:-32767px; border:1px solid #ddd;}
#cborder {height:1px; line-height:0px; overflow:hidden;}
#cborder div {float:left; height:0px; border:1px solid #ddd;}
.side {width:195px;}
.main {width:400px; margin-left:2px; margin-right:2px;}
--></style>
</head>
<body>
<div id="page">
<div id="header">header</div>
<div id="columns">
<div id="side1" class="side">1<br>2<br>3</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 id="side2" class="side">1<br>2<br>3<br>4<br>5<br>6</div>
</div>
<div id="cborder"><div class="side"><br></div><div class="main"><br></div><div class="side"><br></div></div>
<div id="footer">footer</div>
</div>
</body>
</html>
|
実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_3columns_vert_just.html(別ウィンドウ表示)
「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)
コメント