html - 如何在 Bootstrap 中按百分比排列 div 的高度，没有滚动条

Question

我想制作一个响应式的内容框。我可以按百分比设置 Div 的宽度(例如:30%、50%)。但是当我以百分比设置高度时，它不起作用。 我想在页面的特定 % 中制作页面的 3 个 div。

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

}

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