Divの高さを合わせるスクリプト
パーマリンク | 2007年10月24日 16:03
tableでは簡単な高さあわせだが、CSSレイアウトの場合なかなか難しく背景などが途中で切れてしまうことが多々ある。
もちろん大枠で囲んでやればいいわけだが、Javascriptを利用して高さそろえるのもありかも。
Javascriptサンプル
指定したIDで一番高いものにその他の高さを合わせます。
window.onload = function(){
//高さ合わせるIDを指定
var id = new Array("jsLeft", "jsCenter", "jsRight");
var idHeight = new Array();
//指定IDの高さを取得
for(i=0; i<id.length; i++){
idHeight[i] = document.getElementById(id[i]).offsetHeight;
}
//配列を昇順でソート
idHeight.sort(
function Func(a, b){//ソートのための比較関数
return (b - a);
}
);
//一番高いのに合わせる
for(i=0; i<id.length; i++){
document.getElementById(id[i]).style.height = idHeight[0] + "px";
}
}
HTMLサンプル
<div id="jsLeft">
<h5>Javascript</h5>
<p>Javascriptはクライアントサイドで動作するプログラムです。</p>
<p>柔軟な言語のせいかいろいろな書き方があってわけわかりません。</p>
</div>
<div id="jsCenter">
<h5>PHP</h5>
<p>PHPはサーバサイドで動作するプログラムです。</p>
<p>
PHP5は本格的なオブジェクト指向言語となり、PHP4のサポートも2007年いっぱいで終了のようですので<br />
PHP5に乗り換えたいのですが現在レンタルサーバはPHP5に対応しているところはあまりないので躊躇してしまいます。
</p>
</div>
<div id="jsRight">
<h5>MySQL</h5>
<p>MySQLはデータベースです。</p>
</div>
CSSサンプル
#jsLeft, #jsCenter, #jsRight {
float: left;
width: 200px;
padding: 5px;
}
#jsLeft {
background-color: #CCCCCC;
}
#jsCenter {
background-color: #000000;
}
#jsRight {
background-color: #993300;
}
実行結果
Javascript
Javascriptはクライアントサイドで動作するプログラムです。
柔軟な言語のせいかいろいろな書き方があってわけわかりません。
PHP
PHPはサーバサイドで動作するプログラムです。
PHP5は本格的なオブジェクト指向言語となり、PHP4のサポートも2007年いっぱいで終了のようですので
PHP5に乗り換えたいのですが現在レンタルサーバはPHP5に対応しているところはあまりないので躊躇してしまいます。
MySQL
MySQLはデータベースです。
IE7、Mac IE5.5、Firefox2.0.0.8、Netscape7.1で動作確認。問題はsafariで動かないこと(爆
とりあえずプロトタイプということで近いうちになんとか原因突き止めたいところですが・・・
どーもsortあたりが怪しいっぽい・・・
Divの高さを合わせるスクリプトタグ:
トラックバック
- http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/175
最新更新ページ
- 2008/09/08sprintf()メモ
- 2008/09/05一定時間でsession終了メモ
- 2008/08/203ds MAX プラグイン Greeble
- 2008/08/13RSS 3Dデータ
- 2008/07/09PHP ファイルのオープンと読み込み
