ブートストラップ3分の高さのdivは展開されません

Question

コンテンツを含む中央揃えのボックスを持つブートストラップ3ページがあります。 コンテンツが大きくなると、ボックスは静的になり、内容は増えませんが、ブートストラップコンテナが大きくなります。 「ボックス」が展開されなかった理由はわかりません。私は "位置：相対"と "オーバーフロー：隠し"を試みましたが、うまくいきません。
「コンテナ流体」も試しました。反応はありませんでした。

私のCSS-スタイルシート：

html, 
    body { 
     height:100%; 
     width:100%; 
    } 

    .container { 
     height:100%; 
     min-height:100%; 
    } 

    .row { 
     height:100%; 
     min-height:100%; 
    } 
.box { 
    height:90%; 
    min-height:90%; 
    max-width:1100px; 
    background-color:rgba(0,0,0,0.83); 
    text-align:left; 
    padding-left:5%; 
    padding-right:5%; 
    padding-top:1%; 
    overflow:hidde; 
    position: relative; 
} 

HTML：より多くのコンテンツが入って来て、それが成長doesntのなぜあなたはボックスの高さをハードコードしている

<div class="container"> 
     <div class="row"> 
      <div class="box"> 
       <div class="col-xs-12"> 
       </div> 
      </div> 
     </div> 
</div> 

Answer 1

は、thatsのあなたが設定する必要があります。 height〜auto。あなたがいないので、多くのコンテンツが存在している間、ボックスは最小の高さを持っていることをしたい場合は、ちょうど追加min-height: 100vh;

.box { 
    height:auto; 
    min-height: 100vh; 
    /* etc. 
} 

あなたは、ブートストラップを使用しているのでFiddle

Answer 2

作業を参照してください使用し、この

のように作ってみますその後、

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 box"> 
      <div class="col-xs-12"> 
      </div> 
     </div> 
    </div> 

と同様に高さを作る：

.box 
{ 
    height: 100%; 
}