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

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

2.2 css

$color-1: #b2bec3;
$color-2: #dfe6e9;
$width-1: 200px;
html,body {
  height: 100%;
}
.content {
  min-height: 100%;
  overflow-y: auto;
}
.header,.footer {
  text-align: center;
  height: 60px;
  line-height: 60px;
  background: $color-1;
}

.main {
  clear: both;
  overflow: hidden;
  min-width: 600px;
  margin-bottom: 90px;
  .left,.right {
    width: $width-1;
    background: $color-2;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}

.main .center {
  margin: 0 ($width-1 + 20px);
  background: $color-2;
  height: 100px;
}
.footer {
  margin-top: -60px;
}

2.2.1 float 实现三栏

• 中间部分，left 浮动到左侧，right浮动到右侧
• center 使用左右margin 来实现左右的间隔，左右的margin：左/右侧的宽度 + 间隔

2.2.2 margin 负数实现footer

这里的最小高度，采用的是100%

• 先给html,body:{100%}，这里可以看到，content和footer是分开的
• 给到content 最小高度100%,content 最小就是视口的高度
• footer采用margin-top:-(footer高度)，footer 不占用content的高度，采用负数使得footer移动到上方
• marin部分 margin-bottom: 90px; 底部高度 + 间距

2.3 完整代码

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

3 其他

其实这种布局，还有多种其他的实现方式，例如 绝对定位布局、表格布局、网格布局，在实际中用的相对较少，这里就不一一举例了