CSS圣杯布局（双飞翼布局）

 

我在网上看了有关于css圣杯布局的文章，有很多直接丢代码给效果，看得我云里雾里。首先按我的理解来讲述一下圣杯布局吧。首先他的作用就是：像淘宝网那样，中间先渲染，两边后渲染，其次中间的内容是自适应高度的。最好的例子就是淘宝网了。

样式：

1.三列布局

2.中间板块先渲染，自适应高度宽度

3.两边定宽

那我们就开始实现，

HTML代码

  <div>
    <header>头部</header>
    <div class="container">
      <div id="content">
        这是中心内容板块，最先渲染的块。
      </div>
      <div id="left">左边区域</div>
      <div id="right">右边区域</div>
    </div>
    <footer>尾部</footer>
  </div>

CSS布局，我就不一步一步的实现怎么来的，自己来做一遍就理解了。这其中的几个需要注意的点，首先是：当元素浮动过后，不再撑满父元素，我是再父元素上使用.container{overflow：hidden}的方式来实现，然后是注意浮动之后由于三个板块的宽度太大，大于了父元素的宽度，那就需要使用对两侧元素使用负边距的方式了#left{margin-left:-100%}，#right{margin-left:-200px},剩下的就看自己或者业务的需求来设计.

header,footer{
    line-height: 30px;
    height: 50px;
    width: 100%;
    background-color: #cccccc;
  }
  .container{
    overflow: hidden;
    padding: 0 200px;
    min-width: 200px;

  }
  #content,#left,#right{
    height: 100px;
    background-color: bisque;
    float: left;
  }
  #content{
    width: 100%;
    height: 100%;
    background-color: #409EFF;
    overflow: hidden;
  }
  #left,#right{
    width: 200px;
    position: relative;
  }
  #left{
    margin-left: -100%;
    left: -200px;
  }
  #right{
    margin-left: -200px;
    right: -200px;
  }

这是我做出来的效果

如上述有不足的请多多指正啦，也算自己学习的一个笔记，嘿嘿嘿……