我有问题,我有一个固定的容器,里面有绝对 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;
}
原文由 ml92 发布,翻译遵循 CC BY-SA 4.0 许可协议
父 div
.fixed
是绝对定位的,高度为 50px。所以在它的孩子上应用height: 100%
将继承相对高度(即50px)。在
height: 100vh;
.absolute
。我已经使用计算高度height: calc(100vh - 51px)
来避免滚动条由于top: 51px
。注意:
vh
是视口高度(可见网页高度)的1/100。更新小提琴