7

我有一个带有以下 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>

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

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

4

2 回答 2

10

我改变了一点结构和元素的类/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;
}
于 2013-02-02T19:57:49.013 回答
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;
}
于 2013-02-02T19:50:31.680 回答