css-----典型webapp页面实现

主要是针对顶部与底部固定，中间内容部分自适应滚动的布局方法，应该还有很多，我这里介绍两种：

1.顶部与底部固定定位

​
html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%
    }

    .box {
      display: flex;
      flex-direction:column
    }

    .header{
      width: 100%;
      height: 50px;
      background: red
    }
    .footer{
      width: 100%;
      height: 50px;
      background: green
    }
    .content{
      width: 100%;
      flex-grow: 1;
      overflow-y: scroll;
      font-size: 50px;
    }

​

2.弹性布局

html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%
    }

    .box {
      display: flex;
      flex-direction:column
    }

    .header{
      width: 100%;
      height: 50px;
      background: red
    }
    .footer{
      width: 100%;
      height: 50px;
      background: green
    }
    .content{
      width: 100%;
      flex-grow: 1;
      overflow-y: scroll;
      font-size: 50px;
    }

你以后什么好的方法可以在下方留言，大家一起学习！