覚書：100%高さに
- 11 / 14
- 水
- 2007
CSSを勉強し始めの頃、FF(FireFox)に置ける不具合である、「div内に指定した画像背景又は色指定が反映されない」という内容を覚書したことがあります。あの時は、どうしてそう起こるのかという因果関係すら理解してなかったので、覚書メモはかなり滅茶苦茶なものでした。その後、CSSを書いていく内、何度も同じ問題にぶつかり、やっとじっくりとその因果関係を理解するまでになりました。で、昔の覚書を改訂するつもりで、またちょこっとメモって置きますね。
FFで背景が反映されない問題っていうより、コンテンツを梱包してる親divがコンテンツである子供divちゃんの下に隠れちゃうってヤツですよね。確かにそのまま、divの高さを100パーセント設定(height: 100%)しちゃうと起こるんでしたっけ。でも、リキットレイアウトで、コンテンツ全体を梱包するdiv（例えば、containerとかwrapとかid指定）の高さを100パーセント指定して、コンテンツの大きさが大きくなるにつれて、divのボックスも拡張させる企みですよね。IE6xは、もともと100パーセントも自動指定（auto)と同様に解釈をするため問題無く表示されるんですが、FFはどうも解釈の仕方が違うらしい。逆に言えば、FFはちゃんと正常にコード通り表示するけど、IEはバグだらけとも言えるらしいのです。
対策としては、htmlとbody、そしてコンテンツを梱包してる親divに最小高さ指定を100パーセント指定(min-height: 100%)するのが一般的。
以下、body以下のxhtml文書内容はこんなカンジ↓
注意： bodyより上の構文は勝手ながら省略してあります。
<body>
<div id="container">
<div>コンテンツが入った子供のdivちゃん<⁄div>
又は<p>コンテンツ文<⁄p>とかいろいろなボックス要素。
<⁄div>
<⁄body>
<⁄html>
以下、CSSはこんなカンジ↓
注意： Mac IE5を完全無視なら、一番最初のハックは入らないと思います。最後の行の部分は、IE6以下のブラウザに読み込ませるもの。
/* Mac IE5用バックスラッシュハック \*/
html, body{height:100%;}
/* ハック終わり */
html, body {margin:0;padding:0}
#container{
min-height:100%;
background: url(images/image.gif) 0 0 repeat-y;
}
* html #container{height:100%;}
一方、それでは治らないケースもありました。で、そこで初めて知ったのが、display:tableというもの。min-height: 100%の代わりにdisplay:tableを使うと、問題解決するという場合もあります。でも、これ、全ブラウザがサポートしてるかと言ったらそうじゃないそう。事実、IE７はこのシンタックスをサポートしてないようです。だから、他の手段として使えるかもしれないって事だけ、頭の隅に置いておく程度で充分かと思います。
とまあ、今回はヘタな日本語だけど、うまく書けたかな？(笑） 理解してるようで、実は理解してない自分なんで怪しいですね（笑）
でも、何度も言うようですが、私が勝手に書いてる自分用覚書なので、間違いだらけは承知の上。どうぞ、間違ってたらお許しくださいね。とは言え、検索で引っ掛かるから、無責任なのは罪深い…（汗） なるべく間違いを見つけたら、直すように心がけます！
534 Views
endunhamさんが言われているのって、例えば、divで囲んだコンテナの中にコンテンツ用のボックスを作ると、外側のdivコンテナの高さがコンテンツ用のボックスを覆うほどの高さに足りず、一番下まで伸びてくれない、ということですか？
それであれば、外側のdivボックスにクラスを与えてあげて、CSSでコンテンツに何も入っていない状態のものをそのクラスの:after（:after 擬似要素）として指示してあげると、外側のボックスがちゃんと中にあるボックスを囲んで一番下まで伸びてくれますよ。これは回り込み解除にも使えます。私はMT使ってるときに、この書き方がMTのオリジナルコードに記載されていて、それで使い始めたんですが、こういう使い方は色々なところで結構見かけます。これで、CSSレイアウトが使いこなせるようになると言っても過言ではないです。
＜div class=”wrapper”＞
＜div class=”contents pkg”＞
ここにコンテンツの内容がきます。
＜div＞
＜/div＞
CSSにこんなコードを書きます。（クラスの名前は何でも良いですが、MTではpkgとなっていたので今だに私もpkgを使っています。でも、何でも良いです。あと、別にcontentsクラス自体にCSSを当てはめてあげても良いですが、汎用できるクラスにしておけば、別の箇所でも使えますので。）
.pkg:after {
content: ” “;
display: block;
visibility: hidden;
clear: both;
height: 0;
}
これで殆どの場合（たぶん）、問題解決できますよ〜（たぶん）。（笑）（ハックが必要なときはこれにプラスして当てはめてください。）
おお！akiさん、さすが！セルフクリアリング(self-clearing)がそういう風に使えるはピンと来ませんでしたね〜。私もこのセルフクアリングについて、Dan Cederholmさんの本で見かけましたが、使うまでに至った事がないんですよ。で、akiさんのアドバイスになるほどね〜と頷いてます！
私が書きたかった事って、実はcontainerにサイドバーdivとコンテンツ用divだけの基本2カラムレイアウトのつもりでした。やっぱり書き方不味かったみたいですね（汗）
でも、デザインによってakiさん察しの通り、container内に更にwrapのようなdivが入って、その中にサイドバーやメインコンテントのdivが含まれる時、すごーくこのpseudo要素使用のテク使えますよね。ちなみにpseudo要素が『擬似』要素と日本語で言うとは知りませんでした（笑）
実は、ちょっと前にakiさんがおっしゃてるようなレイアウトをして、ぜんぜんうまくいかなったんです。今思うと、これですよ！サイドバーdivとコンテントdivを囲むwrap君に擬似要素を指定すれば良かったんですよね！早速また、これを試してみます！
akiさんがコメントくれる度にCSSが上達しますよ〜。akiさんに感謝！！！！また何かアドバイスあったら、先輩！教えてくださ〜い :-)