html - Bootstrap 3 Column Site {高度 : 100%;} not working

Question

我知道这是一个常见问题，我为无法弄清楚而感到非常愚蠢，但我在 HTML 中有一个 3 列布局，我真的无法在我的生活中解决这个问题。

这是我网站的基本布局:

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

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

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

Answer 1

这样看。

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

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

所以你的盒子的高度都将被设置为匹配浏览器窗口的高度......

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

因为:

一旦您的内容不再适合其容器的高度(即，当您缩小浏览器窗口时，您也会缩小所有容器的计算高度，最终净空将变得太小)——溢出就会发生。 “最高”框的内容将最先溢出，然后它的部分内容将溢出框下方可见(因为您不使用 overflow: hidden)。

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

所以在这个例子中，背景图案将始终是浏览器窗口 100% 的高度(当高度缩小到低于该高度时，与最高内容的高度不匹配)...

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

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

希望对您有所帮助!祝你好运!