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>header</header>
<main>main</main>
<footer>footer</footer>