Bootstrap 3 min-height div erweitert nicht

Question

Ich habe eine Bootstrap 3 Seite mit einer zentrierten Box, die Inhalt enthält. Wenn der Inhalt wächst, bleibt die Box statisch und wächst nicht mit meinem Inhalt, aber der Bootstrap-Container wächst. Ich weiß nicht, warum die "Box" nicht erweitert wurde. Ich habe versucht "position: relative" und "overflow: hidden", aber es funktioniert nicht.
Ich versuchte auch "Container-Fluid" - keine Reaktion.

Meine CSS-Stylesheet:

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:

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

Answer 1

Sie die Höhe fest einprogrammiert haben von euch Box, das ist, warum es so mehr Inhalt kommt wachsen tut die eingestellten müssen. height bis auto. Und wenn Sie möchten, dass die Box eine Mindesthöhe hat zwar nicht so viel Inhalt vorhanden nur ist verwenden eine zusätzliche min-height: 100vh;

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

Siehe Fiddle

Answer 2

arbeiten Da Sie Bootstrap verwenden, versuchen wie diese

zu machen

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

und dann die Höhe machen wie:

.box 
{ 
    height: 100%; 
}