Bootstrap 3 Column Site {height：100％;}不工作 [英] Bootstrap 3 Column Site {height: 100%;} not working

问题描述

我知道这是一个常见的问题，我觉得真的很愚蠢的无法弄清楚，但我有一个3列的布局在HTML，我真的不能想出这一点对我的生活。

I know this is a common problem and I feel really stupid for not being able to figure it out, but I have a 3 column layout in HTML, and I seriously cannot figure this out for the life of me.

这是我的网站的基本布局：

Here is the basic layout of my site:

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

fixed header, 1 sidebar on each side, middle area with content.

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

Here is a mockup of the site that I'm speaking about: http://eitanrosenberg.com/tests/pop/bootstrap/

看起来不错首先，但是当浏览器调整大小时，侧边栏变得非常小，有一吨的空白。为什么是这样？非常感谢。

It looks ok at first, but when the browser is resized, the sidebars get really small and there is a ton of white space. Why is this? Thank you so much in advance.

推荐答案

这样看。

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

The height:100% of the container div (and the column divs) gets their height from the body-element (100% of that), and the height of the body element is calculated as 100% of the height of the html element

然后，html元素的高度从浏览器窗口的当前高度计算（实际上是100％）。

The height of the html element is then (in practice) calculated from the current height of the browser window (100% of that).

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

So the height of your boxes will all be set to match the heigth of the browser window...

因为：

一旦您的内容不再适合您的浏览器窗口它的容器的高度（即，当你收缩浏览器窗口，你也收缩所有你的容器的计算高度，最终的净空会太小） - 溢出发生。然后，最高框的内容将是第一个溢出，并且其内容的部分将溢出它在框下面是可见的（因为你不使用overflow：hidden）。

Once your content no longer fits within the height of its container (ie. when you shrink the browser window you also shrink the calculated heights of all your containers and eventually the headroom will be too small) - overflow happens. The content of the "highest" box will then be the first to overflow, and parts of its content will then spill out of it to be visible below the boxes (since you don't use overflow: hidden).

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

The browser will then allow you to scroll past the bottom of the boxes (so to speak) in order for you to be able to see the content that "overflows the box", but it doesn't adjust the height of container - the boxes will still keep the same height as the browser window while you scroll...

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

So the background patterns will always be the height of 100% of the browser window in this example (an not match the height of the highest content when the height shrinks below that)...

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

One way to remedy this - is to adjust the height of the boxes with Javascript (calculate the height of the highest column and set that as an absolute value for height on the container and the boxes - every time the page resizes)

...或者你可以分别使用容器和列上的display：table和display：table-cell作为解决方法（覆盖Bootstrap网格CSS）特殊布局宽度/媒体查询...

... or you could use "display: table" and "display: table-cell" on the container and the columns respectively as a workaround (overriding the Bootstrap grid CSS) for this particular layout width/media queries...

希望这有助于！
祝你好运！

Hope this helps! Good luck!

这篇关于Bootstrap 3 Column Site {height：100％;}不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！