Question

我需要将粉红色div设为100％浏览器高度，O(p)无法正常工作，有一个滚动条，所以它就像105％...

height: 100vh

html,
body {
  width: 100%;
  height: 100%;
  color: white;
  background-color: #002B5A;
  margin: 0;
  padding: 0;
  direction: rtl;
}
#right {} #left {
  min-height: 100%;
  height: 100%;
  background-color: #CA1F4B;
}

Check out this Bootply

Answer 1

您需要将#right的身高设置为100%。

#right {
    height:100%;
}

由于#left是#right元素的子元素，因此它只是父级高度的100%。由于#right默认设置为height:auto;，因此不会100%。

html,
body {
  width: 100%;
  height: 100%;
  color: white;
  background-color: #002B5A;
  margin: 0;
  padding: 0;
  direction: rtl;
}
#right { 
  height:100%;
}
#left {
  min-height: 100%;
  height: 100%;
  background-color: #CA1F4B;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="right">
  right
  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-offset-1" id="left">
    left
  </div>
</div>

（全屏查看片段）

Bootply

Answer 2

尝试移除最小高度并将高度更改为vmax，vmin或vh。

#left {
    height: 100vh;
    background-color: #CA1F4B;
}

http://www.bootply.com/dGavhuGt6g#

使div达到100％的高度

2 个答案: