css让div盒子高度占完整个屏幕高（盒子的高度自适应屏幕剩余的部分）

美奇开发工作室

于 2020-03-10 14:06:09 发布

阅读量5.6k

点赞数 1

分类专栏： # CSS

本文链接：https://blog.csdn.net/qq15577969/article/details/104773282

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

先来看一下场景需求：

解决方法：

给div盒子添加min-height:100vh样式即可，CSS代码如下：

body {
	width: 100%;
	height: 100%;
	font-family: "Microsoft YaHei";
	font-size: 0.7rem;
	color: #333;
	line-height: 0.7rem;
	background: #F7F7F7;
}
#page {
	width: 640px;
	height: 100%;
	min-height:100vh;
	margin: 0 auto;
	background-color:#FFFFFF;
}
/* 小于640px */		
@media all and (max-width:640px) {
	#page {
		width: 100%;
		height: 100%;
		justify-content: center;
	}
}