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>
    原文作者:shaoyi52
    原文地址: https://segmentfault.com/a/1190000017186279
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞