css实现上下固定中间自适应布局

html:

<div class="top-center-bottom">
        <div class="top"></div>
        <div class="center"></div>
        <div class="bottom"></div>
</div>

1:使用定位实现:

css:

.top-center-bottom>div{
  position:absolute;
}
.top-center-bottom .top{
  top:0;
  height:100px;
  width:100%;
  background:red;
}
.top-center-bottom .bottom{
  bottom:0;
  height:100px;
  width:100%;
  background:red;
}
.top-center-bottom .center{
  bottom:100px;
  top:100px;
  width:100%;
  background:green;
}

2:使用flexbox:

css:

 html, body, .top-center-bottom{
  height:100%;
}
.top-center-bottom{
   display:flex;
   flex-direction:column;
}
.top-center-bottom .top{
  height:100px;
  background:red;
}
 .top-center-bottom .bottom{
  height:100px;
  background:red;
  }
 .top-center-bottom .center{
 flex:1;
  background:green;
}

3:使用grid

css:

.html, body, .top-center-bottom{
  width:100%;
  height:100%;
}
.top-center-bottom{
  display:grid;
  grid-template-rows:100px auto 100px;
  grid-template-columns:100%
}
.top-center-top{
  background:red;
}
top-center-bottom{
  background:red;
}
top-center-center{
  background:green;
}

4:使用css table布局

html:

<div class="top-center-bottom">
        <div class="top"><div></div></div>
        <div class="center"><div></div></div>
        <div class="bottom"><div></div></div>
</div>

css:

html,body, .top-center-bottom{
        height:100%;
        width: 100%;
    } 
    .top-center-bottom{
        display:table;
    }
    .top-center-bottom>div{
        display: table-row;
    }
    .top-center-bottom .top{
        height: 100px;
        background: red;
    }
    .top-center-bottom .bottom{
        height: 100px;
        background: red;
    }
    .top-center-bottom .center{
        background: green;
    } 
注意:
<div class="top">里边一定要有内容,因为display: table-row;相当于<div class="top">转换为了<tr>标签,所以tr标签里是需要有内容的
参考:
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/6519824-213c5911dac658db.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

推荐阅读更多精彩内容