防止新祖先摧毁后代的高度

Question

这个问题是关于在css中继承父母的身高 我试着寻找类似的问题，但却无法找到它 我必须通过设置html,body{height:100%}，然后通过为每个人和每个人分配高度，将该高度继承到.file-info-columns ID，从而使2个列扩展100％浏览器窗口的高度。它的祖先。

我的html结构是 -

<div id="body-contents">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 file-info-columns" id="file-display-col">
                Col1
            </div>

            <div class="col-md-4 file-info-columns" id="file-details-col">
                Col2
            </div>
        </div>
    </div>
</div>

我正在使用Bootstrap CSS库。
用于获取另一个元素的css类似于 -

#body-contents, 
#body-contents > .container-fluid, 
#body-contents > .container-fluid > .row,
#body-contents > .container-fluid > .row > .file-info-columns{
    height: 100%;
}

目前，它看起来像这样 -

Here is a fiddle with the full code.(You might need to scroll down to see col2 block)
这正如我所期望的那样工作。

我之后遇到的问题是，如果我创建了另一个div，它是.file-info-columns的祖先，而不是将其添加为上述height:100% css规则中的成员{{1}缩小它的高度 例如，如果我在file-info-columns内立即添加div，那么它看起来像这样 -


这是一个fiddle that shows the same 上面的解决方案是这样的 -

body-contents

对于将要完成的每一项改变，这似乎都很乏味。

有没有办法避免这种情况或以更好的方式做到这一点？因为，我或其他从事该项目的人对父母的任何更改都要求每次都在上述样式规则中添加该元素。我想我错过了一些非常明显的东西 此外，是否可以仅使用css，而不是使用JavaScript？

修改
我想保留其余元素的高度（我不希望它们占用浏览器屏幕的大小） 。
在一行中引用我的问题 - 有没有办法将div的高度设置为浏览器屏幕大小，如果有新元素作为其祖先添加，则不会受到影响。

Answer 1

我确信Bootstrap 4会处理这个问题，因为它们包含flexbox。

我没有看过BS4但flexbox会这样做：

html,
body {
  height: 100%;
}
#body-contents {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: lightblue;
}
#body-contents * {
  display: flex;
  flex: 1;
}
.file-info-columns {
  padding: 0px;
  border: 1px solid #F00;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="body-contents">
  <div>
    <!-- <= this is the extra div -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-8 file-info-columns" id="file-display-col">
          Col1
        </div>

        <div class="col-md-4 file-info-columns" id="file-details-col">
          Col2
        </div>
      </div>
    </div>
  </div>
  <!-- <= this is the extra div -->
</div>