Html 引导程序3列站点{高度：100%；}不工作

我知道这是一个常见的问题，我觉得自己真的很愚蠢，因为我无法解决它，但我有一个3列的HTML布局，我真的无法解决这个问题

以下是我的网站的基本布局：

固定头， 每侧1个侧边栏， 中间区域包含内容

这是我所说的网站的一个模型：

一开始看起来还可以，但是当浏览器调整大小时，边栏变得非常小，并且有大量的空白。为什么会这样？提前非常感谢。

这样看吧

height:100%的container div（和column div）从body元素获取它们的高度（100%），body元素的高度计算为html元素高度的100%

然后（实际上）根据浏览器窗口的当前高度（100%）计算html元素的高度

因此，框的高度将全部设置为与浏览器窗口的高度匹配

这正是你缩小浏览器窗口高度时看到的

因为：

一旦您的内容不再适合其容器的高度（即，当您缩小浏览器窗口时，您也会缩小所有容器的计算高度，最终净空将太小），溢出就会发生。“最高”框的内容将首先溢出，其部分内容将溢出，以便在框下方可见（因为您不使用溢出：隐藏）

浏览器将允许您滚动浏览框的底部（可以说），以便您能够看到“溢出框”的内容，但它不会调整容器的高度-滚动时，框仍将保持与浏览器窗口相同的高度

因此，在本例中，背景图案的高度始终为浏览器窗口的100%（当高度缩小到该高度以下时，背景图案的高度与最高内容的高度不匹配）

解决这一问题的一种方法是使用Javascript调整框的高度（计算最高列的高度，并将其设置为容器和框上高度的绝对值——每次页面调整大小时）

。。。或者您可以分别在容器和列上使用“display:table”和“display:table cell”作为解决方法（覆盖引导网格CSS），用于此特定布局宽度/媒体查询

希望这有帮助！

---

祝你好运

你是说当你向下滚动时？你看到侧柱下面的白色了吗？是的！确切地我真的很傻，因为我没能弄明白这一点，我整天都在绞尽脑汁。我希望它能跨越整个页面的高度。。。不仅仅是浏览器空间，还有整个文档。我看到很多人在回答其他问题时会用到position:absolute，但我真的不想这么做。对于这个项目来说，浮动所有剩余的内容似乎更好，特别是因为最终我会使它“响应”。这是因为你的布局是相对于窗口的，而不是相对于内容的。因此，无论你有多少内容，侧边栏都只会是窗口的高度。因此，您可以向下滚动查看其余内容，侧边栏将被切断。您需要做的是找到一种方法，使布局相对于内容。也许制作一个与内容相关的包装，最小宽度为100%，然后将你的边栏嵌套在包装中。好吧，我已经在两个边栏和中间区域都有了一个环绕div。我想你的意思是给包装div一个高度：auto和宽度：100%随内容变化？我想我明白你的意思了，但我想再澄清一下，这是怎么回事！谢谢这么简单的修复。我不知道为什么我没有想到要这么做……好吧，在思考了一段时间后，我终于能够在另一台计算机上查看它，但它在webkit浏览器（Safari/Chrome）中不起作用。我在考虑只使用jQuery，但在CSS中必须有一个很好的方法来做到这一点！嗯-奇怪，通常是这样；）-你能链接到你更新的代码吗？也许我们可以帮助确定是什么导致了你的麻烦（如果你的细节中有魔鬼的话），如果我们可以从整体上看一下的话？哦，还有一件事。我对此不是很清楚（很抱歉），但我想您已经注意到，为了使基于“display:table”的解决方案正常工作，您需要在源代码中对列进行重新排序（向左-内容-向右）？