2009-05-19 13 views
2

ウィンドウのサイズを変更し、垂直スクロールバーが表示されたとき、スクロールして下部にスクロールすると、下部が壊れます。私は理由を理解できませんが、ページが100%の高さを使用する方法と関係があると思います。どんな助けもありがとう!ここで css 100%の高さバグ

のページです。ここでは、スクリーンショット

zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNGzxsdesign.com/main1.html

答えて

2

でそれをハックする必要がありますポジショニング。 ajmはmin-heightの使用について話しました。理想的には、100%高めにするとheightの代わりに使用するべきです。

他の問題が発生しました。要素を絶対的に配置すると、要素はもはやページ構造の一部になりません。代わりに、彼らは別の平面に住んでいるので、ページの寸法には影響しません。 <div id="flashcontent">がウィンドウ境界を超えて実行されても、<body>の罫線には影響しません。

position: absoluteを使用しないで修正できます。本当の必要はありません。代わりに、#flashcontent要素を通常の位置に配置し、#bg要素を完全に取り除くことができます。代わりに#flashcontentに背景を置き換えてください。次に、margin: 0 auto;padding-top: 179px;を使用して正しい場所に置きます。

+0

私はまさにあなたが言ったようにしました。そして、それは助けとなりましたが、それはまだカバーされていない底のスペースの5pxです。どんな考え? ありがとうございます。 –

+0

すべての一般的なブラウザ内のページを確認したので、私が見たものをヒアリングしました。Firefox:非常に近いです。オペラ:魅力のように働く。 IE7:うまくいきません。サファリ:うまくいきません。クロム:うまくいきません。私は完全に失われています。 –

+0

#flashcontentの分を高さに追加するのを忘れていました。私の悪い。今それは正しいように見える。しかし、Operaの垂直スクロールバーがどうして下に行くのか分かりませんが、他のブラウザでは#flashcontentが終了すると停止します。 –

0

残念ながら高さ:100%;別の方法で実装されています...あなたがそれを使用するときにブラウザが望むことを確実にすることはできません。

クリアを使用してください:左;両方ともクリアです。あなたのスタイルで。

+1

私は決して100%がとても扱いにくいと思ったことはありません。私は明確なプロパティを使用しようとしましたが、無駄です。ありがとうございました! –

0

高さ100%は1画面の高さです。上にスクロールすると、高さの100%をカバーします。あなたのブロックをスケールするか、少なくとも画面の中央に移動してください。これを行うには、上下のパディングをautoに設定します。

また、あなたのヘッドタグが正しく閉じられていません。チェックthis

+0

そう、頭のタグのタイトルについて忘れてしまった:) これは私がこの権利を理解していなかったか、あるいは単にボトムとトップにオートを加えても影響はなかった。あなたの時間をありがとう! –

0

あなたのページは、すべての要素に対して100%の高さを使用していることに完全に基づいています。ユーザーのブラウザビューポートが十分な大きさであれば問題ありません。ただし、ブラウザのサイズをと十分に小さくすると、そのページの高さは100%になり、物が下からずれることになります。

コンテナエレメントの1つに最小高さを設定します。ブラウザウィンドウがその高さを下回ると、サイズ変更が停止されます。または、あなたのコンテナアイテムの1つにあなたのフラッシュを入れるのに十分な大きさの普通の高さを設定し、他のものがそれを継承できるようにすることができます。

そして、IE6は最小の高さ(FF2 +、IE7、Safariのすべてのん)をサポートしていないので、あなたはそれがCSS height財産と絶対を使用して、あなたのミックスだlike so.

+0

ご協力ありがとうございます、私は間違いなくそれに留意します。 –