2008年07月28日(月)

CSS / スタイルシートで高さを合わせる、高さ100%を実現する

テーマ:CSS

スタイルシートのfloatによる段組で、メニューと本文を2段に分けるっていうシチュエーションはよくあると思います。

そのとき、メニューを本文の長さにあわせようとして、スタイルシートに height:100% を書いて、うまくいかなかったことはありませんか?



それで、その対策を調べてみました。スタイルシートだけでうまく実現できないのかなーということです。



結論から言うと、スタイルシートだけではできません。残念。

テーブルを使うか、JavaScriptを使うしかありません。


そんなわけで、JavaScriptを使用してみました。その記録です。




(1) 以下の記事からコード部分をコピーして .js ファイルとして新規作成します。HTMLヘッダ内で、作成した外部javascriptファイルを読み込むようにします。


指定した要素の高さを取得し、全部を一番高いやつに合わせるスクリプト

http://totora.jpn.org/archives/2005/07/box.html




(2) HTMLヘッダのJavaScript部分に以下のコードを書き足します。idは高さを合わせたい要素のidを列挙。


window.onload = function(){
syncBoxHeight("id_01", "id_02");
}



(3) これでIEでは動きますが、Firefoxでは動かなかったです。コードにミスがあるので修正します。


objNode.style.height = maxWidth;

objNode.style.height = maxWidth+'px';



(4) JavaScriptをOFFにしているユーザーさんのために、高さの記述をします。


.foo {
min-height:100px;
height: auto !important;
height: 100px;
}


詳細は以下の記事参照
http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html




【関連リンク】

http://norisfactory.com/stylesheetlab/000001.php

http://oshiete1.goo.ne.jp/qa3357598.html


【2008.08.26追記】

スタイルシートだけでできる方法(ハック)をこちらで発見しましたが、コメント欄を見る限り致命的な不具合があるようですので使えません。

http://coliss.com/articles/build-websites/operation/css/558.html

こちらでも同じようなライブラリを発見しました。

使ってみたところ、こちらのほうが使い勝手が良かったです。

http://blog.webcreativepark.net/2007/07/26-010338.html


AD
いいね!した人  |  コメント(0)  |  リブログ(0)

とんでもさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

コメント

[コメントをする]

コメント投稿

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。