实施例

Question

在我的页面中，我定义了三个div，其中一个为col-md-2，一个为col-md-8，另一个为col-md-2。而且我希望正确的div应该采用100％的屏幕高度，即使没有控制。我已将高度和最小高度设置为100％，但它无法正常工作。我的代码是这样的。我需要做些什么来克服这一点。

<div id="propertiesContainer" class="row col-md-2" style="border:solid 1px;padding-left:unset;padding-right:unset;min-height: 100%;height:100%;"></div>

Answer 1

你必须将body，html，container，row设置为100％。

请注意，只有当父级为100％时，div才会占据100％的高度（不含任何内容）。

html,body{
 width:100%;
 height:100%;
}
.row div{
  height:100px;
  background-color:red;
}
.row, .container{
  height:100%;
}
.row .right{
  height:100%;
  background-color:green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-2"></div>
        <div class="col-xs-8"></div>
        <div class="col-xs-2 right"></div>
    </div>
</div>

Answer 2

为了将元素的height设置为屏幕高度的100％，他的每个父母也必须100％。

实施例

＆＃13;

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);

html,
body {
  height: 100%;
}

.main {
  height: 100%;
}

.main .side {
  height: 100%;
}

/*/ Decoration /*/
body {
  background-color: #ffeeff;
}

.main {
  border: dashed 1px blue;
}

.main div {
  border: dashed 1px red;
}

＆＃13;

<div class="container main">
  <div class="col-xs-2">
    Left
  </div>
  <div class="col-xs-8">
    Center
  </div>
  <div class="col-xs-2 side">
    Right
  </div>
</div>

＆＃13;

Answer 3

<div class="a-class">
</div>

CSS

.a-class{
    min-height: 100vh;
}

or 
.a-class{
   height: 100vh;
}

Answer 4

请提供您的小提琴代码，否则可能会在代码下面帮助您！

.lastdiv{
  position:absolute;
  display:block;
  height:100%;
  background: #ccc;
  right:0;
}

html, body{
  height:100%;
}

Div应包含100％的屏幕高度

4 个答案:

实施例