個別記事
float の問題を overflow で解決
- この記事が属するカテゴリー
- CSS
float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。
簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。
container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。
しかし、container に幅と overflow を指定すれば解決します。
#container {
background-color: #ddffbb;
width: 100%;
overflow: auto;
}細かい注意点や応用などは、結構はしょっているのでネタ元を見てください。
2005-03-25T19:34:28+09:00
| コメント (7)
| トラックバック (3)
|
関連性が高いエントリー 5 件
トラックバック
- このエントリーのトラックバックURL:
- http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/193
このリストは、次のエントリーを参照しています: float の問題を overflow で解決:
- MS-K's irresponsible Diary さんからのトラックバック
- float させた要素を内包したボックスの高さ
- Luchy bagさんで読んだんだけど、これ知らなかったぁ！ float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。こ... [続きを読む]
- 2006年02月04日 21:57
- Eblog さんからのトラックバック
- clearを使わずにfloatの親ボックスに背景を表示させる
- clearを使わずにfloatの親ボックスの背景を表示する方法を発見。 まだ試し... [続きを読む]
- 2006年06月21日 16:45
- AIRE-PROJECT BLOG さんからのトラックバック
- floatを内包したボックスの高さ問題解決
- フルCSSでレイアウトしていると必ず起こる問題が、floatしているボックスを内... [続きを読む]
- 2006年10月30日 10:10
コメント
- ばあど さんからのコメント
なるほどー。これは色々と応用が効きそうですな。
有り難うございます。- 2005年03月26日 23:44
- e-luck さんからのコメント
![[TypeKey Profile Page]](http://www.lucky-bag.com/nav-commenters.gif)
実際、なんでこれで解決できるのかが不思議だったりもしますよね。
- 2005年03月26日 23:52
- つつい さんからのコメント
containerの背景色で悩んでいたところ、検索でこちらの記事にたどり着き、問題を解決できました。ありがとうございます。
- 2005年03月31日 22:46
- e-luck さんからのコメント
つつい さん、お役に立てて良かったです:-)
- 2005年03月31日 22:56
- 幸之介 さんからのコメント
こんにちは。いつも参考にさせていただいています。
このoverflowによる解決策ですが、残念な欠点がひとつあります。
それは、「マウスホイールクリックによるスムーズスクロールができなくなる」という問題です。マウスホイールによる通常のスクロールは動くのですが、クリックしたスクロールは効かなくなるのです。WinIE6だけの問題なのかもしれませんが。- 2005年12月16日 13:26
- e-luck さんからのコメント
情報、ありがとうございます。そうなんですか、それは確認していませんでした。後で確認してみます。
あと、NS7.1 ではうまく行かないって欠点もあるようですね。- 2005年12月16日 18:17
- kikky さんからのコメント
ほとんどのブラウザで、背景を表示させる方法です。
http://kikky.net/pc/float_bg.html
- 2007年08月16日 14:55
コメントしてください
コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。