设置高度自适应不同设备屏幕的高度-蒲公英云

设置高度自适应不同设备屏幕的高度

qq音乐的歌曲播放页面，页面的宽度和设备宽度是一致，这时候我们就用的flex布局，但是首先要设置html和body宽度都为100%，因为百分比布局是相对父级元素来说的，有以下html代码

<body>
    <div class="main">
        <header></header>
        <div class="content"></div>
        <footer></footer>
    </div> 
</body>

css

<style> html,body{ 
    height:100%;
}
.main{ 
    height:100%;
    display:flex
}
header{ 
    height:100rem;
}
.content { 
    flex:1;
}
footer{ 
    height: 100rem;
}
</style>

然而，如果使用vue开发，由于是单页开发，只有一个页面，无法在单个组件中通过css的方式设置html和body(如果在index.html设置html和body后其他页面也都变成了高度自适应的，但是通常我们其他页面是不需要这种布局的)，这时候可以通过js设置html和body的高度

mounted() { 
    /*console.log(document.documentElement.clientHeight)*/
    document.documentElement.style.height='100%'
    document.body.style.height='100%'
    document.getElementById('app').style.height='100%'
  }