css布局记录

1. 外部div高度自适应 内部一个【固定高】另一个【自适应高度】
   

   <div id="body">
   	<div id="header"></div>
   	<div id="main"></div>
   </div>
   1.flex
   body:   display: flex;
      	    flex-direction: column;
   header: height:100px;
   main:   flex-grow: 1;
   2.position
   body:   position: relative;
   header: height:100px;
   main:   position: absolute;
           top: 100px;
           bottom: 0;
           width: 100%;  或者 left:0;right:0
   

2. 圣杯布局
   （1）flex 高度一致
   

   <header></header>
   <div id="main">
       <div id="left"></div>
       <div id="center"></div>
       <div id="right"></div>
   </div>
   <footer></footer>
   

   header,footer{height: 60px;}
   #main{display: flex;}
   #left,#right{width:80px}
   #center{flex-grow: 1;height:200px}
   

   （2）float 高度取最高
   

   <header></header>
   <div id="main">
   	<div id="center"></div>
       <div id="left"></div>   
       <div id="right"></div>
   </div>
   <footer></footer>
   

   header,footer{height:60px;clear:both}
   #main{
   	padding-left: 100px;
   	padding-right: 100px;
   	box-sizing: border-box;
   }
   #left,#center,#right{float:left}
   #left{
   	height: 213px;
   	margin-left: -100%;
       position: relative;
       width: 100px;
       left: -100px;
   }
   #right(不浮动){
       width: 100px;
       margin-left: 100%;
       height: 112px;
       float: none;
   }
   #right(浮动){
       width: 100px;
       height: 143px;
       right: -100px;
       position: relative;
       margin-left: -100px;
   }