Как установить высоту divs в процентах, без полос прокрутки, в bootstrap

Question

Я хочу, чтобы окно содержимого было отзывчивым. Я могу установить ширину Div s в процентах (например: 30%, 50%). Но когда я устанавливаю высоту в процентах, она не работает. Я хочу сделать 3 divs моей страницы в specefic% моей страницы.

.top 
 
{ 
 
\t height:250px; 
 
    /*height:28%;*/ 
 
\t background-color:#dad8c3; 
 
\t width:100%; 
 
\t 
 
} 
 
.body_part{ 
 
\t width:100%; 
 
\t background-color:#9CC; 
 
\t 
 
\t height:560px; 
 
    /*height:60%;*/ 
 
\t background: -webkit-linear-gradient(-90deg,#e4e0dd,white,#e4e0dd); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(-90deg,#e4e0dd,white,#e4e0dd); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(-90deg,#e4e0dd,white, #e4e0dd); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(-90deg,#e4e0dd,white, #e4e0dd); /* Standard syntax (must be last) */ 
 
\t 
 
} 
 
.footer_part{ 
 

 
\t background-color:#6c5067; 
 
\t width:100%; 
 
    height:97px; 
 
\t /*height:12% !important;*/ 
 
\t 
 
} 
 
html,body{ 
 
\t background-image:url(../images/moment%20a.jpg); 
 
\t height:100%; 
 

 
}

<div class="row"> 
 
    <div class="col-lg-12 top"> 
 
    <div class="container"></div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg-12 body_part"> 
 
    <div class="container"></div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class=" col-lg-12 footer_part"> 
 
    <div class="container"></div> 
 
    </div> 
 
    </div>

Answer 1

Вы можете использовать viewport percentage блок, чтобы сделать это:

html, 
 
body, body > div { 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
.top { 
 
    height: 28vh; 
 
    background-color: #dad8c3; 
 
} 
 
.body_part{ 
 
    background-color: #9CC; 
 
    height: 60vh; 
 
    background: -webkit-linear-gradient(-90deg, #e4e0dd, white, #e4e0dd); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(-90deg, #e4e0dd, white, #e4e0dd); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(-90deg, #e4e0dd, white, #e4e0dd); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(-90deg, #e4e0dd, white, #e4e0dd); 
 
    /* Standard syntax (must be last) */ 
 
} 
 
.footer_part { 
 
    background-color: #6c5067; 
 
    height:12vh; 
 
}

<div class="row"> 
 
    <div class="col-lg-12 top"> 
 
    <div class="container"></div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-lg-12 body_part"> 
 
    <div class="container"></div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class=" col-lg-12 footer_part"> 
 
    <div class="container"></div> 
 
    </div> 
 
</div>