css - 使 div 100% 高度

Question

我需要将粉红色 div 设置为 100% 浏览器高度，height: 100vh 不能正常工作，有一个滚动条所以它就像 105%...

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

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

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