Question

我有一个ASP.NET MVC视图，其中包含以下Twitter Bootstrap layour：

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

使Twitter Bootstrap列具有相同的高度

2 个答案: