引导程序-子级填充父级的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大。 如果我在孩子上使用height：100％，它会变大，因为它占用了（导航+标头）+ 100％。 所以我尝试了几件事。 我用带有boostrap4的flexboxes尝试了一下，但是没有按我的意愿工作。 我可以说height：calc（100％-x）。 但是问题在于x不是固定值，因为它具有响应性。

那么，在不扩大页面大小的情况下，如何用孩子填充父母的其余部分（100％）的最小高度为100％？

Answer 1

只需将.row-eq-height为auto。

我的意思是这样的：

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

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

看看这个小提琴： https : //jsfiddle.net/digitalrevenge/p7q0ohrf/

Answer 2

据我了解，您正在固定容器的高度。 那就是问题所在。 从容器中移出高度，您的内容区域将自动增长，因为它处于可伸缩状态。 您还可以从.row-eq-height类和导航中删除高度。 休息就可以了。