Question

如何创建父级高度的列。我有一个navbar，下面有一个container，有三列。现在我必须将最后一列设为父级的高度，scrollable。在我的情况下，父亲只是navbar。

<div class="navbar navbar-default navbar-fixed-top">
</div>

<div class="container-fluid">
    // row with three cols
</div>

如何让我的第三个col成为父级的高度，并且在不知道父级的高度的情况下滚动？

Answer 1

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        // row with three cols
    </div>
</div>

<style>
.navbar{
    height: 300px;
    background-color: red;
}
.container-fluid{
    height: inherit;
    background-color: green;
}
</style>

但这假设您的容器流体在请求的父级内部，而不是在其外部。

Answer 2

您的问题尚不清楚，但我认为您想要的是侧边栏定义其父级的高度以及内容采用相同的高度。你的标记看起来像这样：

<div class="parent">
  <div class="sidebar..."></div>
  <div class="content..."></div>
</div>

目前支持的CSS允许您根据父元素的高度设置子元素的高度 - 假设父元素具有已定义的高度。正如其他人所说，它不允许您设置元素相对于其兄弟的高度。

如果符合以下条件，您只能获得所需效果（我认为）：

您可以在.parent上设置固定的高度，并在每个侧边栏和内容上使用height:100%或height:inherit。
您可以使用JavaScript动态阅读.sidebar的高度并将其应用于.content。

CSS解决方案看起来像这样：

.parent {
  height: 400px; /* Or 50% or 12em or whatever you want */
}
.aside, .content {
  height: inherit;
}

jQuery解决方案可能如下所示：

$(document).ready(function () {
  $('.content').css('height', $('.sidebar').height() + 'px');
});

创建父级的高度列

2 个答案: