圣杯布局要求
header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
header,footer{
background:#aa0;
height:100px;
}
.main{
background:#ccc;
display: flex;
}
.main div{
flex: 0 0 20%;
}
.main .left,.main .right{
height:200px;
}
.main .middle{
flex: 1;
min-height:300px;
}
</style>
</head>
<body>
<header>header</header>
<div class="main">
<div class="left" style="background:#a00;"></div>
<div class="middle" style="background:#0a0;">
<div style="height:400px;background:#f00;"></div>
</div>
<div class="right" style="background:#00a;"></div>
</div>
<footer>footer</footer>
</body>
</html>
image.png
