css控制div等比高度

在移动端开发中，在banner轮播图未加载出来之前，banner层是不占文档流高度的，当从服务器获取完banner数据，展示的时候，banner层因为有了内容所以会撑开，导致banner层下面的内容也随之移动，为解决此bug，可以控制下banner层的宽高比

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .box{

　　　　　　　//控制该div宽高比
            overflow: hidden;
            height: 0;
            padding-bottom: 20%;


            background: #999;
        }
    </style>
</head>
<body>
    <div class="box">
        占位
    </div>
    <p>文字文字文字</p>
</body>
</html>