解决css盒子的height:100%失效问题

解决css盒子的height:100%失效问题

一 问题描述、
我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因。今天我在做模态框背景覆盖时就遇到了这样的问题。
二 解决方案、
1、网上搜了很多答案，基本上都是只要把html 和 body 也设置成height : 100% 就行了，然并卵。。。
2、然后我看了框架的f12样式，发现只需要盒子中加入css position属性（absloute 或 fixed）
top: 0;
right: 0;
bottom: 0;
left: 0;
就完美的贴合了整个屏幕

css代码

.modal_bg{
     
            display: none;
            background-color: rgba(0,0,0,0.4);
            position: fixed;
            width:100%;
            height: 100%;
            z-index:1000;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 1;
        }