使 Twitter Bootstrap 列具有相同的高度答案

【问题标题】：Making Twitter Bootstrap Columns the Same Height使 Twitter Bootstrap 列具有相同的高度
【发布时间】：2013-01-17 21:39:34
【问题描述】：

我有一个带有以下 Twitter 引导层的 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>

我的问题是我的 [主要内容] 比我的 [右侧边栏内容] 高得多。由于我的 [右侧边栏内容] 具有不同的背景颜色，因此我希望它一直延伸到我的页脚（我的 [主要内容] 的整个高度。）

我尝试将height: 100% 设置为侧边栏，但在 Chrome 中没有明显效果。谁能看到如何实现这一目标？

【问题讨论】：

Equal height columns 是 CSS 中的一个老问题。它与 Bootstrap 无关。
没错，但乔纳森可能希望引导程序具有内置解决方案。至少我做到了；）

标签： html css twitter-bootstrap fluid-layout

【解决方案1】：

我稍微改变了结构和元素的类/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>

现在是 CSS：

#parent{
  position: relative
}

#right-sidebar{
  position: absolute;
  right: 0;
  height: 100%;
  background: blue;
}

.main-content{
  background: red;
}

【讨论】：

天啊！昨天发布后不得不用完。事实上，我在发帖时把<div>s 搞混了。事实上，它们是如您所建议的那样。对于那个很抱歉。检查 CSS...
当主要内容的高度大于侧边栏的高度（至少在 Chromium 中）时，此解决方案会中断。

【解决方案2】：

高度 100% 不起作用，因为周围的容器需要一个高度属性。

您可以在容器上设置 800px 的高度，使您的高度 100% 生效。但是，这并不等于主要内容，只是让它们看起来没有那么不同的一种方式。

您可以使用 display: table;对于像列一样的表格。 http://jsbin.com/ojavub/1/edit

#right-sidebar {
  background-color: red;
  display: table-cell;
}

.container {
  display: table;
}

.row-fluid {
  display: table-row;
}

【讨论】：