html - bootstrap - 子项填充父项的 100%，但不会更大

Question

html,body, .container-fluid {
  height: 100%;
  border: 1px solid orange;
}

.page-header {
  padding-bottom: 2%;
  padding-top: 2%;
}

#icons {
  border: 1px solid red;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid green;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class='container-fluid'>
  <div class='row'>
    <div id='header' class='page-header col-lg-12 col-sm-12 col-xs-12 col-md-12'>
      <div class='col-lg-2 col-md-2 col-sm-2 col-xs-3'><img id='logo' src='img/logo.png' class='img-responsive'></div>
      <div id='icons' class='col-lg-2 col-lg-offset-2 col-md-3 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-12 col-lg-offset-2'>icons</div>
    </div>
    <div id='navigation' class='col-lg-12 col-sm-12 col-xs-12 col-md-12' style='border:1px solid black;height:100%;'>navigation</div>
  </div>

  <div class='row row-eq-height'>
    <div id='left' class='col-lg-2 col-sm-4 col-xs-8 col-md-2' style='border:1px solid green;'>left</div>
    <div id='right' class='col-lg-10 col-sm-10 col-xs-10 col-md-10' style='border:1px solid green;'>right<br></div>
  </div>
</div>

编辑:

好吧，也许我不太清楚我到底想要什么，所以我用另一张图片再试一次:

我希望侧边栏和内容 div 填充整个父 div 的其余部分，没有滚动条，这样它就不会比实际的父 div 大。如果我对 child 使用 height:100%，它会变大，因为它需要(导航 + 标题)+ 100%。所以我尝试了几件事。我用带 boostrap4 的 flexboxes 试了一下，它没有用，正如我想要的那样。我可以说 height:calc(100%- x)。但问题是 x 不是固定值，因为它是响应式的。

那么我该怎么做才能在不扩大页面的情况下用子项填充其余的父项 (100%)，使最小高度达到 100%？

Answer 1

只需将 .row-eq-height 的高度设置为自动即可。

我的意思是这样的:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid green;
  height: auto;
}

如果需要，您还可以提供一个最小高度，例如 min-height:100px;

看看这个 fiddle :https://jsfiddle.net/digitalrevenge/p7q0ohrf/