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

  1. 首页
  2. 新闻资讯
  3. 正文

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; 试一下能否生效。

上一个：常州宠颐生动物医院电话号码（常州宠颐生美多格动物医院）

下一个：宠物dr品牌有哪些（宠物dr品牌对比）

热门文章

归纳