twitter-bootstrap 使 Twitter Bootstrap 列具有相同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14665562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making Twitter Bootstrap Columns the Same Height
提问by Jonathan Wood
I have an ASP.NET MVC view with the following Twitter Bootstrap layour:
我有一个带有以下 Twitter Bootstrap 布局的 ASP.NET MVC 视图：
<div class="container">
<div class="container-fluid header">
[Header content]
</div>
<div class="row-fluid">
<div class="span9">
<div class="container-fluid main-content">
[Main Content]
</div>
</div>
<div id="right-sidebar" class="span3">
[Right Sidebar Content]
</div>
</div>
</div>
My problem is that my [Main Content] is much taller than my [Right Sidebar Content]. Since my [Right Sidebar Content] has a different background color, I would prefer that it ran all the way down to my footer (the full height of my [Main Content].)
我的问题是我的 [主要内容] 比我的 [右侧边栏内容] 高得多。由于我的 [右侧边栏内容] 具有不同的背景颜色，我希望它一直延伸到我的页脚（我的 [主要内容] 的整个高度。）
I tried setting height: 100%to the sidebar but that had no visible effect in Chrome. Can anyone see how to achieve this?
我尝试设置height: 100%为侧边栏，但在 Chrome 中没有明显效果。谁能看到如何实现这一目标？
回答by cortex
I've change a little bit the structure and element's classes/ids.
我稍微改变了结构和元素的类/ID。
<div class="container-fluid">
<div class="row-fluid header">
[Header content]
</div>
<div id="parent" class="row-fluid">
<div class="span9 main-content">
[Main Content]
</div>
<div id="right-sidebar" class="span3">
[Right Sidebar Content]
</div>
</div>
</div>
And now the CSS:
现在是 CSS：
#parent{
position: relative
}
#right-sidebar{
position: absolute;
right: 0;
height: 100%;
background: blue;
}
.main-content{
background: red;
}
回答by Dustin
The height 100% doesn't work because the surrounding container needs a height property.
高度 100% 不起作用，因为周围的容器需要高度属性。
You can set a height of like 800px on the container to make your height 100% take effect. However, this does not make it equal to the main content, just a way to make them look not so different.
您可以在容器上设置 800px 之类的高度，使您的高度 100% 生效。然而，这并不等于主要内容，只是一种让它们看起来没有那么不同的方式。
You can utilize display: table; for table like columns. http://jsbin.com/ojavub/1/edit
您可以使用 display: table; 对于像列这样的表。http://jsbin.com/ojavub/1/edit
#right-sidebar {
background-color: red;
display: table-cell;
}
.container {
display: table;
}
.row-fluid {
display: table-row;
}
