div(ブロック要素)の背景が切れる解決法

2008年1月6日
カテゴリー: Web製作

説明画像
 CSSでheight:100%としても、Firefoxではスクロールした後の背景が切れてしまうという現象に長々悩まされていました。
 上の画像はスクロールして切れてしまった時。こうする事で解決できました。
 該当のdiv要素に

 min-height:100%;
 _height:100%;

 min-heightで最小値の高さを100%とすればいつでも100%という事に。
 ですが、min-heightはIEでは反応してくれません。IEはheightでmin-heightの動作をするというバグを利用するという方法があるようです。
 よってIEのみ反応するアンダースコアハックで「_height:100%」とします。これでIE6とFirefox2の両方で同じようにする事ができました。

 スクロールするほどページが長くなくてもDiv要素が下まで伸びて欲しい時は、html、body要素にも height:100%とすると可能になります。

関連する記事はありません。

タグ:

このエントリーをはてなブックマークに追加  

コメントをどうぞ