我知道这是一个常见问题，我为无法弄清楚而感到非常愚蠢，但我在 HTML 中有一个 3 列布局，我真的无法在我的生活中解决这个问题。
这是我网站的基本布局:
固定标题， 每侧 1 个侧边栏， 带有内容的中间区域。
这是我正在谈论的网站的模型:http://eitanrosenberg.com/tests/pop/bootstrap/
一开始看起来不错，但是当调整浏览器大小时，侧边栏变得非常小并且有大量空白。为什么是这样？非常感谢您。
最佳答案
这样看。
容器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)。 .
希望对您有所帮助! 祝你好运!
关于html - Bootstrap 3 Column Site {高度 : 100%;} not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14656097/