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

I like study.

于 2020-02-14 10:38:38 发布

阅读量707

点赞数

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/rj2017211811/article/details/104307708

版权

Web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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%'
  }

I like study.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设置高度自适应不同设备屏幕的高度

qq音乐的歌曲播放页面，页面的宽度和设备宽度是一致，这时候我们就用的flex布局，但是首先要设置html和body宽度都为100%，因为百分比布局是相对父级元素来说的，有以下html代码<body> <div class="main"> <header></header> <div class="content"></d...
复制链接

扫一扫

专栏目录