clearfixをoverflowで
2007/12/15 Sat
コーダーにとって、一番やっかいな問題は、フロートに関するあれこれだと思うんです。
そして、clearfixが当たり前のように使用されていたし、自分も多様していたんです。
clearfixについて、いまさらわざわざ僕が語ることもないので、ご存じない方は以下で検索してみてください。
clearfixをgoogleで検索
さて、本題ですが、いままでclearfixを適用させていたボックスに、overflowと、幅(など)を指定すればよいとのこと。
これを(おそらく)一番最初にウェブ上に公開した、clearing floatsでは、
というソースを書いている。
僕は、幅を100%で指定すると、なんだかカラムが落ちちゃったりするおぼろげな、苦い記憶があるので、
width: 100%
ではなく、
height: 100%;
を使ってます。
ブラウザでチェックして、万一おかしければ、hasLayoutのほかの要素を指定すればいい訳だと思うので、いろいろ試してみるのがいいと思う。
とりあえず、僕は今のところ、これでいってます。
ただ、MacのIEでは不具合があるみたい。
しかし、これの最大のメリットは、dream weaverのデザイン画面でもきれいに表示されるということ!
clearfixだと、分かっていながらもガタガタに崩れたデザイン画面で作業をすすめないといけないことにかなりストレス溜まってました。
えーと、hasLayoutとか、clearのこととか、ちゃんと書き留めておかないと!ということがまだまだあるので、またの機会にその辺も書き留めることにします。
そして、clearfixが当たり前のように使用されていたし、自分も多様していたんです。
clearfixについて、いまさらわざわざ僕が語ることもないので、ご存じない方は以下で検索してみてください。
clearfixをgoogleで検索
さて、本題ですが、いままでclearfixを適用させていたボックスに、overflowと、幅(など)を指定すればよいとのこと。
これを(おそらく)一番最初にウェブ上に公開した、clearing floatsでは、
div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}
(CSS - Clearing floatsより)
というソースを書いている。
僕は、幅を100%で指定すると、なんだかカラムが落ちちゃったりするおぼろげな、苦い記憶があるので、
width: 100%
ではなく、
height: 100%;
を使ってます。
ブラウザでチェックして、万一おかしければ、hasLayoutのほかの要素を指定すればいい訳だと思うので、いろいろ試してみるのがいいと思う。
とりあえず、僕は今のところ、これでいってます。
ただ、MacのIEでは不具合があるみたい。
しかし、これの最大のメリットは、dream weaverのデザイン画面でもきれいに表示されるということ!
clearfixだと、分かっていながらもガタガタに崩れたデザイン画面で作業をすすめないといけないことにかなりストレス溜まってました。
えーと、hasLayoutとか、clearのこととか、ちゃんと書き留めておかないと!ということがまだまだあるので、またの機会にその辺も書き留めることにします。
この記事へのコメント
この記事へのトラックバック
| ホーム |



