移动端布局头部固定底部高度自适应(scroll-view)

  

    
2
    
1
  

方法一

使用css 的计算属性 calc

.container{
   width: 100%;
   height: 100vh;
 }
 header{
   width: 100%;
   height: 50px;
   background: red;
 }
 footer{
   width: 100%;
   height: calc(100vh - 50px);
   background: blue;
 }

方法二

利用 css 弹性盒子 display:flex

flex布局详解

.container{
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
 }
 header{
   width: 100%;
   height: 50px;
   background: red;
   flex-grow: 0;
 }
 footer{
   width: 100%;
   background: blue;
   flex-grow: 1;
 }

小程序的 scroll-view 也可以用这种方法动态的去设置高度。需要稍微改动一下。
把 scroll-view 的高度设置成100%；给外出 body 一个高度。这个高度在flex-grow 的作用下并不会起作用。

.container{
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
 }
 .header{
   width: 100%;
   height: 50px;
   background: red;
   flex-grow: 0;
 }
.body{
   width: 100%;
   background: blue;
   heigth:100px;
   flex-grow: 1;
}
.scroll-view{
   height:100%;
}