flex布局实现上下固定高度，中间自适应布局

最新推荐文章于 2024-04-28 14:47:31 发布

不安分的魔菇

最新推荐文章于 2024-04-28 14:47:31 发布

阅读量1.5w

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_31680159/article/details/97623550

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

flex布局实现上下固定高度，中间自适应布局

flex布局在实际开发中越来越常用，实现左右宽度或者上下高度固定，中间自适应的布局的实际需求也很常见。实现起来也很简单：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>flex</title>
	<style type="text/css">
		body{
			padding: 0;
			margin: 0;
		}
		.container{
			height: calc(100vh - 50px);
			background-color: black;
			display: flex;
			flex-direction: column;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: #e77c8e;
		}
		.main{
			width: 100%;
			flex: 1;
			background-color: #2bae85;
		}
		.footer{
			width: 100%;
			height: 100px;
			background-color: #7a7374;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="header">header</div>
		<div class="main">main</div>
		<div class="footer">footer</div>
	</div>
</body>
</html>

注意点：
1、container父容器的高度必须是一个可以计算出来的固定高度。
2、实际开发中因为中间部分内容层级太多，甚至嵌套表格等，使得自适应无法生效。这时候要看一下中间自适应部分的高度是否从父容器继承过来，可以试给table高度不对的那一层设置 height:100%; 或者 height:inherit; 试一下能否生效。

不安分的魔菇

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
flex布局实现上下固定高度，中间自适应布局

flex布局实现上下固定高度，中间自适应布局flex布局在实际开发中越来越常用，实现左右宽度或者上下高度固定，中间自适应的布局的实际需求也很常见。实现起来也很简单：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>flex</title...
复制链接

扫一扫