Bootstrap 3 min-height div не разворачивается

Question

У меня есть загрузочная страница 3 с центрированной коробкой, которая содержит контент. Если контент растет, окно остается статичным и не растет с моим контентом, но контейнер загрузки загружается. Я не знаю, почему «ящик» не расширился. Я попробовал «position: relative» и «overflow: hidden», но это не сработало.
Я попробовал также «контейнер-жидкость» - никакой реакции.

Мой 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:

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

Answer 1

Вы зашиты высоту из вас коробки, то почему оно не растет, как больше контента приходит Вы должны установить. 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%; 
}