創建父級高度的列

Question

如何創建高度為父級的列。 我有一個navbar ，下面有一個三列的container 。 現在，我必須在最右邊一列中設置父級的高度，並且也可以scrollable 。 在我的情況下，父母就是navbar 。

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

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

我如何才能使我的第三個彩色字元達到父級的高度，並且還能在不知道父級的情況下滾動呢？

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