パーマリンク | 2007年10月24日 16:03
tableでは簡単な高さあわせだが、CSSレイアウトの場合なかなか難しく背景などが途中で切れてしまうことが多々ある。
もちろん大枠で囲んでやればいいわけだが、Javascriptを利用して高さそろえるのもありかも。
指定したIDで一番高いものにその他の高さを合わせます。
<script language="javascript" type="text/javascript">
//<![CDATA
//左右コンテンツの高さあわせ(高いほうに)
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";
}
}
//]]>
</script>
<div id="jsHeight01">
<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>
</div>
#jsLeft, #jsCenter, #jsRight {
float: left;
width: 200px;
padding: 5px;
}
#jsLeft {
background-color: #CCCCCC;
}
#jsCenter {
background-color: #000000;
}
#jsRight {
background-color: #993300;
}
Javascriptはクライアントサイドで動作するプログラムです。
柔軟な言語のせいかいろいろな書き方があってわけわかりません。
PHPはサーバサイドで動作するプログラムです。
PHP5は本格的なオブジェクト指向言語となり、PHP4のサポートも2007年いっぱいで終了のようですので
PHP5に乗り換えたいのですが現在レンタルサーバはPHP5に対応しているところはあまりないので躊躇してしまいます。
MySQLはデータベースです。
IE7、Mac IE5.5、Firefox2.0.0.8、Netscape7.1で動作確認。問題はsafariで動かないこと(爆
とりあえずプロトタイプということで近いうちになんとか原因突き止めたいところですが・・・
どーもsortあたりが怪しいっぽい・・・
/ 金額 : ¥ 2,940