Bootstrap 3 Column Site height: 100%; 不工作

Posted 2023-03-06

【中文标题】Bootstrap 3 Column Site height: 100%; 不工作

【英文标题】：Bootstrap 3 Column Site height: 100%; not workingBootstrap 3 Column Site height: 100%; 不工作

【发布时间】：2013-01-17 08:15:03

【问题描述】：

我知道这是一个常见问题，但我无法弄清楚这是一个很愚蠢的问题，但我有一个 3 列的 html 布局，我真的无法终生解决这个问题。

这是我网站的基本布局：

固定标题， 每侧 1 个侧边栏， 有内容的中间区域。

这是我正在谈论的网站的模型：http://eitanrosenberg.com/tests/pop/bootstrap/

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

【问题讨论】：

您是指向下滚动的时候吗？你看到侧柱下面是白色的吗？

是的！确切地。我因为无法弄清楚这一点而感到非常愚蠢，并且整天都在绞尽脑汁。

我希望它跨越页面的整个高度......不仅仅是浏览器空间，而是整个文档。我看到很多人在其他问题中回答他们会使用 position:absolute，但我真的不想那样做。对于这个项目来说，浮动所有剩余的东西似乎更好，特别是因为最终我要让它“响应”。

这是因为你的布局是相对于窗口的，而不是相对于内容的。因此，无论您拥有多少内容，侧边栏都只是窗口的高度。因此，您向下滚动以查看其余内容，并且侧边栏被切断。您需要做的是找到一种使布局相对于内容的方法。也许制作一个相对于最小宽度为 100% 的内容的包装器，然后将侧边栏嵌套在该包装器内。

嗯。好吧，我已经在侧边栏和中间区域周围有一个包装 div。我假设您的意思是给包装 div 一个 height: auto 和 width: 100% 随内容变化的？我想我明白你在说什么，但想进一步澄清一下

【参考方案1】：

这样看。

容器div（和列div）的height:100%从body-element（100%）获取高度，body元素的高度计算为100%的高度html元素

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

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

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

因为：

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

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

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

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

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

希望这会有所帮助！ 祝你好运！

【讨论】：

不知何故做到了！谢谢！如此简单的修复。我不知道为什么我没想到这样做......

好的，在考虑了一段时间后，我终于能够在另一台计算机上查看它，但它在 webkit 浏览器（Safari/Chrome）中不起作用。我在考虑只使用 jQuery，但在 CSS 中必须有一个很好的方法来做到这一点！

嗯 - 奇怪，它通常会这样做；) - 你能链接到你更新的代码吗？如果我们可以完整地查看它，也许我们可以帮助确定导致您的麻烦的原因（如果您的详细信息中有魔鬼的话）？

哦 - 还有一件事。我不是很清楚（抱歉）-但我假设您注意到您需要重新排序源代码中的列（左-内容-右）以使“显示：表”基于解决方案工作正常吗？