Solarized
HOME > WEBプログラム覚書 > Divの高さを合わせるスクリプト
Divの高さを合わせるスクリプト
tableでは簡単な高さあわせだが、CSSレイアウトの場合なかなか難しく背景などが途中で切れてしまうことが多々ある。
もちろん大枠で囲んでやればいいわけだが、Javascriptを利用して高さそろえるのもありかも。
Javascriptサンプル
指定したIDで一番高いものにその他の高さを合わせます。
Javascript
- <script language="javascript" type="text/javascript">
-
-
-
- window.onload = function(){
-
-
- var id = new Array("jsLeft", "jsCenter", "jsRight");
- var idHeight = new Array();
-
-
- 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>
HTML
- <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>
CSSサンプル
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に対応しているところはあまりないので躊躇してしまいます。
IE7、Mac IE5.5、Firefox2.0.0.8、Netscape7.1で動作確認。問題はsafariで動かないこと(爆
とりあえずプロトタイプということで近いうちになんとか原因突き止めたいところですが・・・
どーもsortあたりが怪しいっぽい・・・
| 投稿日 |
2007年10月24日 16:03 |
| カテゴリ |
JavaScript |
| タグ |
インターフェイス | サンプルコード |
| トラックバック URL |
http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1122 |
2009年1月29日 17:00
Divの高さを合わせるスクリプト(safari対応版)続きを読む