如何在引导程序中以百分比（不带滚动条）排列div的高度

Question

我想让内容框变得灵敏。我可以设置Div的宽度百分比（例如：30％，50％）。但是当我按百分比设置高度时，它不起作用。 我想在我的页面的一个specefic％中制作我的页面的3个div。

＆＃13;

＆＃13;

.top
{
	height:250px;
     /*height:28%;*/
	background-color:#dad8c3;
	width:100%;
	
}
.body_part{
	width:100%;
	background-color:#9CC;
	
	height:560px;
    /*height:60%;*/
	   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;
	width:100%;
    height:97px;
	/*height:12% !important;*/
	
}
html,body{
	background-image:url(../images/moment%20a.jpg);
	height:100%;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>