Bootstrap 3 min-yükseklik div genişlemiyor

Question

İçeriği içeren ortalanmış bir kutuya sahip bir bootstrap 3 sayfam var. İçerik büyürse, kutu statik kalır ve içeriğimle büyür, ancak önyükleme kabı büyür. "Kutu" n neden genişlemediğini bilmiyorum. "Position: relative" ve "overflow: hidden" denedim ama işe yaramadı.
Ayrıca "konteyner sıvısı" denedim - reaksiyon yok.

Benim CSS-Stil:.

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: Daha fazla içerik geliyor gibi ayarlamak zorunda büyümek doesnt neden kutu içinde boyunu kodlanmış olan

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

Answer 1

, şu height ila auto. Eğer o kadar çok içerik varken kutu minimum yüksekliğe sahip olduğunu istiyorsan sadece ek bir min-height: 100vh;

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

Eğer ön yükleme alanı kullanarak bu yana Fiddle

Answer 2

çalışma Bkz kullanın bu

gibi yapmaya

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

ve sonra gibi yüksekliğini olun:

.box 
{ 
    height: 100%; 
}