2012.10.17 Wednesday
【CSS】<li>の高さ height を 100％ にしてるのに 0 のままで望む高さにならない
そもそも、
トップページをjQueryでカルーセル的に背景を一定時間かえることをやろうとしていた。
切り替える背景の単位はりすとでマークアップして下記の通りに記述
それに対してスタイルシートを
としたんです。
そしたら#aaa.liの背景がでません。
Firebugで調べると heightが0
何ソレ!?
なので #aaa に
としてみてたが、依然としてheightは0のまま。
調べても日本語の情報がない・・・。
英語情報では
floatさせるか display: inline-block を試せば解決すると書いてあったが、それでも解決しない。
色々探した挙句、ただシンプルに height 100% css でぐぐると、
「親要素が100％じゃないと子供はいくらがんばっても100％にならないよ」
ん？
だって親要素の #carousel もちゃんと height: 100% にしてるし・・・。
！？
あ、間に<ul>があるの忘れてた・・・。
Firebugで調べると #carousel 直下の ul は heightが0でした。
そんでもって。
これで解決しました。
格別大それた原因があったわけでなく、単なる定義漏れでした。
ネットでがんばって調べても見つからない問題はかなり初歩的なケアレスミスの可能性があります。という教訓が学べました。無駄な30分が過ぎたorz
同じケースでドハマりしてるコーダーの助けになりますように・・・。
トップページをjQueryでカルーセル的に背景を一定時間かえることをやろうとしていた。
切り替える背景の単位はりすとでマークアップして下記の通りに記述
<div id="carousel"><ul>
<li id="aaa">
<h2>ウダウダ</h2>
<p>ほにゃららほにゃらら</p>
</li>
<li id="bbb">
<h2>ウダウダ</h2>
<p>ほにゃららほにゃらら</p>
</li>
<li id="ccc">
<h2>ウダウダ</h2>
<p>ほにゃららほにゃらら</p>
</li>
</ul></div>
それに対してスタイルシートを
#carousel {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
}
#aaa {
width: 100%; height: 100%;
background: url(bg.png);
}
としたんです。
そしたら#aaa.liの背景がでません。
Firebugで調べると heightが0
何ソレ!?
なので #aaa に
display: block;
としてみてたが、依然としてheightは0のまま。
調べても日本語の情報がない・・・。
英語情報では
floatさせるか display: inline-block を試せば解決すると書いてあったが、それでも解決しない。
色々探した挙句、ただシンプルに height 100% css でぐぐると、
「親要素が100％じゃないと子供はいくらがんばっても100％にならないよ」
ん？
だって親要素の #carousel もちゃんと height: 100% にしてるし・・・。
！？
あ、間に<ul>があるの忘れてた・・・。
Firebugで調べると #carousel 直下の ul は heightが0でした。
そんでもって。
#carousel > ul {
width: 100%; height: 100%;
}
これで解決しました。
格別大それた原因があったわけでなく、単なる定義漏れでした。
ネットでがんばって調べても見つからない問題はかなり初歩的なケアレスミスの可能性があります。という教訓が学べました。無駄な30分が過ぎたorz
同じケースでドハマりしてるコーダーの助けになりますように・・・。
