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

先来看一下场景需求:

css让div盒子高度占完整个屏幕高(盒子的高度自适应屏幕剩余的部分)_第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;
	}
}

最终效果图展示:

css让div盒子高度占完整个屏幕高(盒子的高度自适应屏幕剩余的部分)_第2张图片

你可能感兴趣的:(CSS)