背景を繰り返すdivでオーバーフローの隠れた問題

divを使用して、ラッパー内のコンテンツの高さの100％まで背景を繰り返そうとしています。背景を繰り返すdivでオーバーフローの隠れた問題

私はこのためにoverflow: hiddenを使用していますが、これはユーザーの画面解像度に応じたポイントでコンテンツをカットします。

overflow:hidden行を削除すると、背景がまったく繰り返されず、#wrapper divはコンテンツの完全な高さを想定しないことを意味します。

ここにコードとプレビューが表示されます。http://jsbin.com/ikuba4/2 - 誰かが偉大なポインタを持っていれば！

編集：明確にするために、問題は、私は（垂直方向に繰り返し背景画像スライスが含まれています）私の#wrapper div要素が必要だということである動的#inner_wrapperのdiv要素の高さにその高さを拡張する必要があります - #wrapper divの中overflow:hidden結果ではなく削除しますその高さは全く伸びていますが、overflow:hiddenを使うと高さがポイントまで伸びますが、コンテンツは途切れます。 #wrapperで

出典

2011-01-20 spinozf

を追加height:100%

を削除画像を伸ばす？ –

これは、＃wrapper div（背景イメージスライスを含む）がその内側の#inner_wrapper divの完全な高さであることを意味します。現時点では、私はこの仕事をすることに近づくことができるオーバーフローを使用しています：隠された – spinozf

OK、thirtydotの答えはあなたが必要なものですか？とにかくコメントにコメントするときは、私がその人に通知するように '@ 'を使います。最初の3文字で十分です。 –

：

height: 100%を削除します。
overflow: hiddenを削除します。 #inner_wrapperで

：

height: 100%を削除します。
overflow: hiddenを追加します。

Firefox/Firebugでテストすると、それらの手順が並べ替えられます。

fixed jsBinは、これらの手順と同等の処理を行っています。

編集：@Marnixは彼の答えで指摘したよう
、あなたもheight: 100%#outer_containerからを削除する必要があります - 私はそれが可能にするためにあらゆる必要はないと思います。同様に動作

出典

2011-01-20 09:52:55 thirtydot

ありがとう@ thirtydot - 完璧に動作します。私は間違いなくこのタイプのレイアウトでは、すべての外側を含むdivを100％に設定する必要があると思っていたでしょう。 – spinozf

A少し異なる：

#outer_container

がheight: 100%

#wrapper

削除height: 100%

#inner_wrapper

あなたは "100％の高さに繰り返し背景を" 何を意味するのですか？overflow:auto

出典

2011-01-20 09:58:03 Marnix

これを達成する別の方法を知っておいてよかった乾杯@Marnix – spinozf

+1 '＃outer_container'で無駄な' height：100％ 'に気付きました。 – thirtydot

背景を繰り返すdivでオーバーフローの隠れた問題

答えて

関連する問題