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>