1.有些頁面的內容較少，撐不起整個屏幕，結果底部內容顯示在了屏幕中間位置。
2.中間部分實現聖盃佈局
效果圖：
代碼：
主要使用了flex:1;
<html>
<head>
<meta charset="utf-8"/>
<title>內容過少時，底部內容不在瀏覽器最下方</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.container{
display:flex;
flex-direction:column;
width:100%;
height:100%;
text-align:center;
}
.top{
width:100%;
min-height:60px;
}
.middle{
flex:1;
background:#8791b7;
min-height:600px;
display:flex;
}
.center{
flex:1;
}
.left{
width:50px;
background:red;
}
.right{
width:50px;
background:red;
}
.bottom{
width:100%;
min-height:60px;
background:#ccc;
}
/*
flex:1;的作用
flex-grow : 1; // 這意味着div將以與窗口大小相同的比例增長
flex-shrink : 1; // 這意味着div將以與窗口大小相同的比例縮小
flex-basis : 0; // 這意味着div沒有這樣的起始值，並且將根據可用的屏幕大小佔用屏幕。例如： - 如果包裝器中有3個div，則每個div將佔用33％
*/
</style>
</head>
<body>
<div class="container">
<div class="top">頂部</div>
<div class="middle">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
<div class="bottom">底部</div>
</div>
</body>
</html>