css 高度自适应

main{
   position: relative;
   height: calc(100% - 138px);
   background: deepskyblue;
}
header{
   height: 88px;
   background: red;
}
footer{
    height: 50px;
   background: red;
 }

 

如过footer和header设死，就可以用上面这种方法

推荐使用flex 布局

html,body{
    display: flex;
    flex-direction: column;
    text-align: center;
        }
        header,footer{
            flex: 0 0 auto;
            background: red;
        }
        main{
            flex: 1 0 auto;
            background: #f90;
            display: flex;
            justify-content: center;
            align-items: center;
        }

header

main

footer