如何有多个列使用twitter引导消耗100％的高度？ [英] How to have multiple columns that consume 100% height using twitter bootstrap?
问题描述
我看过很多类似的问题，但没有找到我要找的答案。更多信息如下：
I have seen a number of similar questions, but have not found an answer for what I am looking for. Further information is as follows:
- 我使用twitter启动，所以我想要一个与它兼容的解决方案
- 布局将显示喜欢。抱歉，我无法嵌入图片，因为我首先需要10张图片。
- 这张图片与我一样接近已经到目前为止。
- 我需要主要内容才能展开与侧边栏相同。
- >侧边栏和主要内容是两种不同的颜色，大小不同。
- 注意，最小高度必须为100％
- 如果内容增长太多，页脚应该移动它需要滚动来看到它）
- 我不想使用JavaScript，但如果需要我不介意一个解决方案，只要它是逐步增强的JS （我也使用jQuery）。
- 页面内容以固定宽度水平居中
- I am using twitter bootstrap, so I would like a solution that is compatible with it
- The layout will look like this. Sorry I cannot embed the image because I need 10 pts first.
- This is as close as I have gotten so far. The problem is that I cannot get the sidebar to stop at the footer.
- I will need the main content to expand the same as the sidebar.
- The sidebar and Main Content are two different colors and vary in size. They must both extend to the footer
- Notice that the minimum height must be 100%
- The footer should move if the content grows too much (i.e. it would require scrolling to see it)
- I do no want to use JavaScript, but if it is required I wouldn't mind a solution with so long as it is progressively enhanced with the JS (I am also using jQuery).
- The page content is centered horizontally with a fixed width
推荐答案
I think this might be, what you are looking for: two column layout source.
主要思想是在< body> 上设置 height：100％< html> ，然后确保容器也占用了所有的高度（通过 min-height：100％）。你可能会注意到，代码还包含IE6的解决方法，因为它最初是写的，当IE6只是另一天的工作。
The main idea is to set height: 100% on both <body> and <html> and then make sure that the container also takes up all the height (via min-height: 100%). You might notice that code also contains workaround for IE6, because it was originally written, when fighting IE6 was just another day of work.
这是通过修改一点复杂和更常用的圣杯布局 来源 。
This was made by modifying a bit more complicated and more often used holy grail layout source.
这篇关于如何有多个列使用twitter引导消耗100％的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![喜欢](\"http://i.stack.imgur.com/L3P85.png\"){kind=link}