关于html:css-实现头部底部中间三栏布局

实现

1. flex 布局

flex 弹性布局，更灵便的去实现多种形式的布局，目前在挪动端、pc端都有较大的利用，有余ie反对10+

1.1 html

<div class="content">  <div class="header">Header</div>  <div class="main">    <div class="left">Left</div>    <div class="center">Center</div>    <div class="right">Right</div>  </div>  <div class="footer">Footer</div></div>

1.2 css

.content div {  display: flex;}.header,.footer {  height: 60px;  background: #b2bec3;}.main {  /*Firefox*/  min-height: -moz-calc(100vh - 150px);  /*chrome safari*/  min-height: -webkit-calc(100vh - 150px);  /*Standard */  min-height: calc(100vh - 150px);  align-items: flex-start;}.main .left,.main .right {  width: 200px;  background: #dfe6e9;}.main .center {  background: #dfe6e9;  margin: 0 20px;  flex-grow: 1;}.footer {  margin-top: 30px;}

1.2.1 flex-grow 实现center自适应

flex 布局实现两头局部的三栏布局
grow属性定义我的项目的放大比例，默认为0，存在残余不放大（left、center），center为1，也就是main局部，除了left right后均为center局部

1.2.2 calc 、vh 实现footer居底

mian 局部应用calc动静计算最小高度，使得main最小高度为 视图高度 - （header+footer）
vh 绝对于视口的高度。视口被均分为100单位的vh

1.3 兼容性

通过代码咱们能看到，这里次要用了flex布局及calc，vh，总的来说如果不要兼容ie9及以下，采纳flex是比拟适宜的布局，较少的代码就能够实现咱们想要的布局形式

关于html:css-实现头部底部中间三栏布局

实现

1. flex 布局

1.1 html

1.2 css

1.2.1 flex-grow 实现center自适应

1.2.2 calc 、vh 实现footer居底

1.3 兼容性

1.4 残缺代码

2. float 实现

2.1 html

2.2 css

2.3 兼容性

2.4 残缺代码