如何在引導程序中以百分比形式安排div的高度，不使用滾動條

Question

我想使內容框具有響應性。我可以設定Div的寬度（例如：30％，50％）。但是當我以百分比設置高度時，它不起作用。 我想在我的頁面的特定區域內製作我的頁面的3個div。

.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>