高度自适应布局设计

Demo1：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
	html,body{
		margin:0px;
		height:100%;	
	}
	.header{
		height:15%;
		background:red;
	}
	.main{
		height: 70%;
		background-color: green;
	}
	.footer{
		height: 15%;
		background-color: gray;
	}

	div{
		display:flex;
		justify-content:center;
		align-items:center;
	}
</style>
</head>
<body>
	<div class="header">header</div>
	<div class="main">main</div>
	<div class="footer">footer</div>
</body>
</html>

当给body里的盒子设置半分比时，需要对html和body设置高度,要实现屏幕高度自适应，就要将html和body的高度设置为100%。

文字居中问题：div使用line-height居中文字的话,就必须使用绝对的px值让line-height等于父盒子的高度px。
但如果文本的父盒子div的高度是百分比值时，如果直接设置line-height:父盒子的百分比值得话是无法实现元素内部的文字垂直居中的。
解决方法：
方法一（这种方式适用于单行和多行文本垂直居中）:
给需要居中的元素加以下代码样式和
display:flex;
align-items:center;
如果还要实现水平居中的话可以加上justify-content:center;
方法二:
增加一个父元素,给父元素设置position:absolute; display:table; 给需要居中的元素设置display:table-cell; vertical-align:middle;
但有个问题，那就是设置display:table-cell; vertical-align:middle;了的多个盒子会跑到一行里。

Demo2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body,html{
			margin: 0px;
			padding: 0px;
		}
		.container {
		  display: flex;
		  min-height: 100vh;
		  flex-direction: column;
		}

		header {
		  background: #cecece;
		  min-height: 100px;
		}

		content {
		  background: #bbbbbb;
		  flex: 1; /* 1 代表盡可能最大，會自動填滿除了 header footer 以外的空間 */
		}

		footer {
		  background: #333333;
		  min-height: 100px;
		}
	</style>
</head>
<body>
	<div class="container">
	  <header></header>
	  <content></content>
	  <footer></footer>
	</div>
</body>
</html>