打开手机淘宝，会看到它垂直方向上的页面分成3部分，上面的搜索框、中间的内容区和下面的tab按钮
下面我将要用 flex 布局实现这个页面的框架
手机端的盒模型一般都是 booder-box，所以，这里给它一个初始化
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
html 的部分是这样的
<div class="container">
<header>header</header>
<main><p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p></main>
<footer>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</footer>
</div>
使用的 css 代码如下
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
li{
list-style:none;
}
.container{
background-color: #f99;
height:100vh;
display:flex;
flex-direction: column;
}
header{
height:100px;
background-color: #eee;
}
main{
flex-grow:1;
overflow:auto;
}
footer{
height:100px;
background-color: #eee;
}
footer>ul{
display: flex;
height:100px;
}
footer>ul>li{
width:25%;
border: 1px solid black;
}
这里主要起作用的是 flex-grow:1;，这行代码会让剩余的空间分成1份，main 区域的部分独占这一份空间
