关于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 是比拟适宜的布局，较少的代码就能够实现咱们想要的布局形式

• 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…