css两端固定大小，中间自动大小

## calc实现 css两端固定大小，中间自动大小##

1. 样式代码

<style type="text/css">
.wrap{
    height:300px;
    width:400px;
    background:#e0e0e0;
}
.top{
    height:50px;
    border:solid 1px #f0f0f0;
}
.midle{
    height:calc(100% - 100px)
}
.bottom{
    height:50px;
    border:solid 1px #f0f0f0;
}
</style>

1. ui界面代码

<div class="wrap">
    <div class="top">
        top wrap
    </div>
    <div class="midle">
        midle wrap
    </div>
    <div class="bottom">
        bottom wrap
    </div>
</div>