高さ:100% & 幅:100% の div がある場合、背景色は主にブラウザの高さと幅になります。しかし、その div 内のコンテンツが動的に拡大する場合、div はコンテンツに従って拡張されず、テキストが重なり合ってその div の上に流れます。一方、min-height と min-width を 100% に設定すると、コンテンツの長さがブラウザーのウィンドウよりも小さい場合、背景色はブラウザーの高さと幅に引き伸ばされません。
html, body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 100%;
width: 100%;
background-color: red;
}
背景色が主にブラウザのウィンドウ サイズを覆うような div を作成する方法ですが、コンテンツが動的に拡大する場合は、コンテンツと同時に拡張することができます。
よろしく。
あなたが実際に何を達成しようとしているのか、私にはまだわかりません。あなたのフィドルサンプルを見ると、内側のダイバーの周りに実線の境界線を使用して赤い周囲を取得する方がはるかに簡単でした(背景色とパディングを持つ別の div の代わりに)。ただし、テキストが からはみ出したくない場合は、 のサイズを変更divできるようにする必要があります。div
私は今あなたの問題を見ていると思います。あなたがやろうとしていることは、あなたがやろうとしている方法では不可能です。あなたは CSS ボックス モデルの根本的な誤解に陥っています。ボックスのmin-heightは、常にその親の高さを参照します。親の高さが設定されていない場合heightはauto、デフォルトで高さが設定されます。つまり、高さは、ボックスのコンテンツが収まるのに必要な大きさになるようにブラウザによって計算されます。min-height!を設定した場合も、そのように計算されます。
body高さをと100%すると、本体はブラウザ ウィンドウと同じ高さになります。外側の div にを指定するmin-heightと100%、ブラウザ ウィンドウと同じ高さになりますが、no に設定しているためheight(設定はプロパティに影響min-heightしませんheight!)、このボックスの高さは ですauto。したがって、実際には、実際の高さ(CSS 標準ではこれを「仮の高さ」と呼んでいます) は、外側の div のコンテンツと同じ大きさ (必ずしも 100% であるとは限りません) にすぎませんmin-height。100%%、実際の高さに関係なく。min-height内側の div を に設定すると、これらの 100% は「親ボックスの高さの 100%」を100%意味します。親ボックスの高さは ですauto。そうではありません 100%。そのため、内側の div が画面全体を埋めません。
もちろん、外側の div をheightに設定することもできます。100%その場合min-height、内側の div を に設定する100%と画面全体に表示されますが、外側の div は実際には 100% の高さになり、100% を超えて拡大することはありません ( FIXED HEIGHTがあります)、内側の div がそれより大きい場合でも、黄色が画面の高さを超えても、赤色が画面の高さを超えて拡大しないのはそのためです。
外側のdivの高さが固定されている場合、高さは固定されます（それは固定高さの全体的なポイントですよね？）または柔軟な高さがありますが、柔軟な高さの場合はそのコンテンツ (内側の div) に必要な値よりも「高く」なることはありません。したがって、設定するかどうかに関係なく、内側の div で使用する100%と、常に外側の div の高さの 100% を参照し、その高さは次のようになります。内側の div に必要です。ここで私が言っていることを理解していただければ幸いです。min-heightheight
ここでは体の高さとあなたの体を参照するため、それmin-heightを toに設定するだけで、外側の div を希望どおりに動作させることができます (常に画面の少なくとも 100% を埋めますが、コンテンツが必要な場合はそれを超えて拡張します) 。高さは固定されていますが、内側の div がそのように動作することはありません。外側の div の幅が固定されている場合、そのように動作する可能性がありますが、内側の div がそれを必要とする場合でも、外側の div は拡張されません。代わりに、内側の div が外側の divの境界を超えてオーバーフローします。100%min-height
私は、あなたが望むように正確に見える Web ページを作成することは問題ないと確信していますが、問題は、私たち (または私) がそれがどのように見えるべきかを知らないことです. 赤と青の境界線で囲まれた醜い黄色のページを望んでいるとは思えませんね。しかし、これまでのところ、これはあなたから見た唯一のページです. 画像を使用しているかどうか (または画像を使用する必要があるかどうか)、最終的にページが実際にどのように見えるかはわかりません。
あなたの質問をはっきりと理解できません。正しいオーバーフロー プロパティを div に設定する必要があると思います。
overflow: auto;それまたは他の適切なものを与えてみてください