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>

bootstrap 如何在没有滚动条的情况下按百分比排列 div 的高度

How to arrange the height of divs in percentage, without scroll bars, in bootstrap

html

css

responsive-design

twitter-bootstrap