html - 为什么我不能使绝对 div 高度 100%

Question

我有问题，我有一个固定的容器，里面有绝对的div，我想设置.absolute div height:100%; 为全高容器 div(500 像素)。这是我试图解决我的问题的方法，这个需要是因为我想创建带有切换容器的移动菜单，并且它对我来说很重要是手机的高度 100%屏幕。

https://jsfiddle.net/d1bh9ncs/

HTML

<div class="container">
  <div class="fixed">
    <div class="absolute">

    </div>
  </div>
</div>

CSS

.container{
  width:100%;
  height:500px;
  background-color:#ddd;
}
.fixed{
  position:fixed; 
  width:100%;
  height:50px;
  background-color:red;
  top:8px;
  left:8px;
  right:15px;
}
.absolute{
  position:absolute;
  height:100%;
  width:100%;
  background-color:green;
  top:51px;
  left:0px;
}

Answer 1

父 div .fixed 是绝对定位的，高度为 50px。所以应用 height: 100% 在它的 child 身上将继承相对高度(即 50px)。

在 .absolute 上使用 height: 100vh;。我使用计算高度 height: calc(100vh - 51px) 来避免由于 top: 51px 而导致的滚动条。

注意:vh为视口(viewport)高度(可见网页高度)的1/100。

Updated Fiddle

.absolute {
  position: absolute;
  height: calc(100vh - 51px);
  width: 100%;
  background-color: green;
  top: 51px;
  left: 0px;
}