02.05 超私的メモ：clearfixが上手くいかない、そんな時 日記ではない comment （0）

今回はかなり個人的なメモなので見てもあんまり面白くないかと…

画像はd-spicaさんからちょっと拝借。すいません、度々お世話になってます。



cssでfloatした要素を含む親要素のborderやbackgroundが
画像のように途中で切れてしまうことがあります。
主にIEで。IEこのやろう！！みんな火狐に乗り換えようぜ！！
ま、まあそれは置いといて
そんなときはclearfixってのを使えば解消するのですが
自分は偶に自分で仕掛けた罠に嵌る。
癖って恐ろしいというお話。


とりあえずclearfix。
大抵は親要素に下記をclass="clearfix"で当ててやるか、
親要素自体に下記のやつを書いてやれば解消します。
色々と種類があるようだけど取りあえずこれで。


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



というか名前は別にclearfixじゃなくても自分が解ればいいです。
普通はこれで解消します。
んが、自分は癖のせいで偶にこれが綺麗に発動してくれない。
具体的にはこれを当ててやっても背景が伸びてくれない。
伸びてるように見えて途中に妙な空白部分があったりする。
実は親要素に当ててなかったのか！？とか色々と考えた結果、とてつもなく簡単なことが原因と判明。

原因は親要素でもclearfixでもなく、子要素。
どうにも癖で
background: #fff url(***.jpg) repeat-y;
とか書いちゃうんですが、これのせいでした。
分かる人はプッと笑ってくれ。この場合、子要素には本当は背景色いらないんだ。
つい背景色指定してから他の要素書いてしまうので、
これのせいで親の背景が伸びていない"ように見えていた"だけだったのです。
つまり、子供の背景色のせいで伸びていた親背景が隠れてしまっていたというそんなヘタレたお話。

---

超私的補足
今のWEBページ、最後の難関は火狐でスクロールすると背景が消えてしまうという現象でした。
それを解決できたのがこれ。某教えて！GOOのとある質問とその回答
うっかりどこを足した時点で解決したのかメモし忘れたけど、取りあえずこれで解決できました。

多分…

html, body { height:100%; /* ● 表示領域に対する高さを確保します */}

か

min-height:100%; /* ● height ではなく min-height が理想を満足する指定です */

か

height:100%; /* ● IE7 quirk mode, IE6 以前 のIEでは min-height に対応してませんが、
height が min-height として振る舞うバグがあるため、これを利用します */


で解決できたんじゃないかとメモメモ。