私はこれがよくある問題であることを知っており、それを理解できないのは本当にばかげていると感じていますが、私は HTML で 3 列のレイアウトを使用しており、私の人生ではこれを真剣に理解することはできません.
私のサイトの基本的なレイアウトは次のとおりです。
固定ヘッダー、両側に 1 つのサイドバー、コンテンツのある中間エリア。
これは、私が話しているサイトのモックアップです: http://eitanrosenberg.com/tests/pop/bootstrap/
最初は問題ないように見えますが、ブラウザーのサイズを変更すると、サイドバーが非常に小さくなり、大量の空白ができます。どうしてこれなの？よろしくお願いします。
このように見てください。
コンテナー div (および列 div) の height:100% は body 要素 (その 100%) から高さを取得し、body 要素の高さは html 要素の高さの 100% として計算されます。
html 要素の高さは、(実際には) ブラウザ ウィンドウの現在の高さ (その 100%) から計算されます。
したがって、ボックスの高さはすべて、ブラウザ ウィンドウの高さと一致するように設定されます...
これは、ブラウザ ウィンドウの高さを縮小したときに表示されるものとまったく同じです。
なぜなら：
コンテンツがコンテナーの高さに収まらなくなると (つまり、ブラウザー ウィンドウを縮小すると、すべてのコンテナーの計算された高さも縮小され、最終的にヘッドルームが小さすぎます)、オーバーフローが発生します。「最も高い」ボックスのコンテンツが最初にオーバーフローし、そのコンテンツの一部がボックスからあふれ出て、ボックスの下に表示されます (overflow: hidden を使用していないため)。
ブラウザは、「ボックスをオーバーフローする」コンテンツを見ることができるように、（いわば）ボックスの下部を越えてスクロールできるようにしますが、コンテナの高さは調整しません - ボックススクロールしている間、ブラウザウィンドウと同じ高さを維持します...
したがって、この例では、背景パターンは常にブラウザー ウィンドウの 100% の高さになります (高さがそれよりも小さくなると、最も高いコンテンツの高さとは一致しません)...
これを改善する 1 つの方法 - Javascript を使用してボックスの高さを調整することです (ページのサイズが変更されるたびに、最も高い列の高さを計算し、コンテナとボックスの高さの絶対値として設定します)。
...または、この特定のレイアウト幅/メディアクエリの回避策 (Bootstrap グリッド CSS をオーバーライドする) として、コンテナと列にそれぞれ「display: table」と「display: table-cell」を使用できます...
お役に立てれば！幸運を！