css flex布局，自适应高度

最新推荐文章于 2024-05-05 05:25:12 发布

yezi_12345

最新推荐文章于 2024-05-05 05:25:12 发布

阅读量1.5k

点赞数 2

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/yezi_12345/article/details/127773188

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如下图所示，

中间红色块儿需要根据手机屏幕大小自适应高度

css可这样写，黑色块儿上加flex-column，红色块上加flex-bottom

.flex-column {
	height: 100% !important;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 100%;
	.flex-bottom {
		box-sizing: border-box;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		z-index: 5;
		overflow-x: hidden;
		height: 100%;
		overflow-y: auto;
	}
}

至此，红色块儿部分会根据屏幕大小自适应高度

同样也适用于PC端