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)

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,910评论 1 87
  • 简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,旨在改变我们基于网格设计的用户界面方式...
    咕咚咚bells阅读 1,084评论 0 4
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 1,563评论 0 59
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 328评论 0 1
  • 张东辉,焦点初级43期坚持原创分享第44天(2017.10.15) 周六下午,是Peter每周回家的日子。...
    星悦传奇阅读 78评论 0 0