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