每日一练28：移动端页面布局总结

圣杯布局：

<div class="app">
        <div class="header">
        </div>
        <div class="container">
            <div class="left">
            </div>
            <div class="main">
            </div>
            <div class="right">
            </div>
        </div>
            <div class="footer">
        </div>
    </div>

.app {
    display: flex;
    flex-direction:column;
    height:100%;
	width:100%;
}
  
.header,.footer{
    flex:0 0 80px;
    background-color:red
}
.container{
    flex:auto;
    background-color:blue;
    display:flex;
}
.container .left{
    flex:0 0 100px;
    background-color:green;
}
.container .right{
    flex:0 0 60px;
    background-color:pink;
}
.container .main{
    flex:auto;
    background-color:gray;
}

效果图如下：只有中间内容滚动，头部红色定位在顶部，底部绿色背景定位在底部，只有中间内容滚动

这个效果用的盒子模型写的，不用定位

<template>
    <div class="app">
        <div class="top">
            <p>我是top</p>
        </div>
        <div class="content">
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>22222222222222222222222222222222222222222222222222222</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
            <p>3333333333333333333333333333333333333333333</p>
            <p>2222222222222222222222222</p>
            <p>11111111111111111111111111111111111111111111111111111</p>
        </div>
        <div class="bottom">
            <p>立即提交</p>
        </div>
    </div>
</template>

.app{
    display:flex;
    flex-direction: column;
    width:100%;
    height:100%;
}
.top{
    height:20px;
}
.top p{
    background-color:red;
}
.content{
    display:flex;
    flex:1;
    flex-direction: column;
    overflow:auto
}
.bottom{
    height:30px;
}
.bottom p {
    background-color:green;
    line-height:30px;
}