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

Question

我有问题,我有一个固定的容器,里面我有绝对div,我想设置.absolutediv height:100%;为容器div的全高(500px).这是我试图解决我的问题,这需要因为我想创建带有切换容器的移动菜单,对我来说重要的是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%它的孩子将继承相对高度(即50px).

使用height: 100vh;上.absolute.我已经使用计算高度height: calc(100vh - 51px)来避免滚动条top: 51px.

注意:vh是视口高度的1/100(可见网页高度).

更新小提琴

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