使Twitter Bootstrap列具有相同的高度

Question

我有一个ASP.NET MVC视图,其中包含以下Twitter Bootstrap:

<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中没有明显效果.谁能看到如何实现这一目标？

Answer 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;
}

Answer 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;
}