css 实现头部底部中间三栏布局

实现

1. flex 布局

flex 弹性布局，更灵活的去实现多种形式的布局，目前在移动端、pc端都有较大的应用，不足ie支持10+

1.1 html

  
Header
  

    
Left
    
Center
    
Right
  
  
Footer

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是比较适合的布局，较少的代码就可以实现我们想要的布局方式

• flex
  
• calc
  
• vh
  

1.4 完整代码

https://codepen.io/xiaofute/p...

2. float 实现

2.1 html

2.2 css

2.3 兼容性

2.4 完整代码

https://codepen.io/xiaofute/p...