css calc属性 固定头部底部

<div>
<div class='top'></div>
<div class='middle'></div>
<div class='bottom'></div>
</div>
<style>
.top{
height：30px
}
.middle{
  overflow-y: auto;
    height: calc(100% - 50px);
}
.bottom{
height:20px
}
</style>

这样头部和底部就固定了