我知道这是一个常见的问题，我觉得自己真的很愚蠢，但是我在HTML中有一个3列布局，我真的无法想象我的生活。
以下是我网站的基本布局：
固定标题， 每侧有1个侧边栏， 中间区域内容。
以下是我正在谈论的网站的模型：http://eitanrosenberg.com/tests/pop/bootstrap/
一开始看起来不错，但是当浏览器调整大小时，侧边栏变得非常小并且有大量的空白区域。为什么是这样？非常感谢你。
答案 0 :(得分：2)
以这种方式看待它。
高度：容器div（和列div）的100％从body-element（100％）得到它们的高度，body元素的高度计算为100％的高度html元素
然后（实际上）从浏览器窗口的当前高度（100％）计算html元素的高度。
因此，您的框的高度将全部设置为与浏览器窗口的高度匹配...
这正是缩小浏览器窗口时所看到的内容！
由于：
一旦您的内容不再适合其容器的高度（即，当您缩小浏览器窗口时，您还会缩小所有容器的计算高度，最终会产生很大的空间） - 发生溢出。然后，“最高”框的内容将首先溢出，然后其部分内容将溢出，以便在框下方可见（因为您不使用overflow：hidden）。
浏览器将允许您滚动框的底部（可以这么说），以便您能够看到“溢出框”的内容，但它不会调整容器的高度 - 当您滚动时，这些框仍将与浏览器窗口保持相同的高度...
因此，在此示例中，背景图案将始终为浏览器窗口100％的高度（当高度缩小时，高度内容的高度不匹配）...
解决此问题的一种方法是使用Javascript调整框的高度（计算最高列的高度，并将其设置为容器和框上的高度的绝对值 - 每次页面调整大小时）< / p>
...或者您可以分别在容器和列上使用“display：table”和“display：table-cell”作为此特定布局宽度/媒体查询的变通方法（覆盖Bootstrap网格CSS）。
希望这有帮助！ 祝你好运！