ブートストラップ - 子より大きな親の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>

EDIT：

がOKAY多分私は私が実際に何をしたいので、明確ではなかったので、私は再びそれを試してみてください別の絵に：

私はサイドバーやコンテンツのdivがしたいです親divの残りの部分をスクロールバーなしで埋めて、実際の親divより大きくならないようにします。子に高さ：100％を使用すると、（ナビゲーション+見出し）+ 100％がかかるため、大きくなっています。だから私はいくつかのことを試みた。私はboostrap4でフレックスボックスで試してみましたが、うまくいきませんでした。私は高さを言うことができます：calc（100％ - x）。しかし問題は、xが固定値ではないということです。応答性があるからです。

子供の親（100％）の残りの部分をページを拡大せずに100％の最小高さにするにはどうすればよいですか？

Answer 1

.row-eq-heightの高さをautoに設定するだけです。

私はこのような意味：https://jsfiddle.net/digitalrevenge/p7q0ohrf/

Answer 2

私は理解してどのような、あなたを：あなたがしたい場合には

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

、あなたもこのフィドルをチェックmin-height:100px;

のような最小の高さを提供することができますあなたの高さを固定しています。それが問題の原因です。コンテナから高さを削除すると、コンテンツ領域が自動的に拡大します。 .row-eq-heightクラスからも高さを削除することもできます。残りはOKです。