垂直自适应问题

一、独立元素的自适应

1.设置高度为auto

设置高度为auto时，元素的高度随内容多少自动变化。

2、使用min-height和max-height

使用min-height时内容达不到min-height的高度时，显示min-height的高度；内容超过min-height时，随内容而自适应。

使用max-height自然是和min-height类似的道理。

二、两列自适应

1、右侧适应左侧

本质：父元素适应子元素的高度；同时清除浮动的子元素，让子元素的内容影响父元素的高度。

< div  class= "main" >

     < div  class= "sub" >This is a highly adaptive exercise

        This is a highly adaptive exercise

        This is a highly adaptive exercise

        This is a highly adaptive exercise

        This is a highly adaptive exercise

        This is a highly adaptive exercise

      

     </ div >this is father element < div  class= "clear" ></ div ></ div >

.main{

     width:  200px;

     background:  yellow;

     color:  #fff;

}

.sub{

     height:  auto;

     float:  left;

     width:  100px;

     background:  yellow;

     color:  #444;

}

.clear{

     clear:  both;

}

2、左右自适应

本质：使用负边距使子元素处于父元素之外，在这里使用了两次这个技术。当最里层的元素增加时，也即sub，content被撑大；当content元素增加时，main被撑大，而main和sub背景颜色相同，达到自适应的效果。

< div  class= "main" >

     < div  class= "content" >

     < div  class= "sub" >This is a highly adaptive exercise

        This is a highly adaptive exercise

        This is a highly adaptive exercise

        This is a highly adaptive exercise

        This is a highly adaptive exercise

        This is a highly adaptive exercise

      this is sub element

     </ div >

     < div >this is father element this is father element this is father element

     this is father elementthis is father element this is father element 

     this is father element this is father elementthis is father element

      this is father element this is father element 

      this is father elementthis is father element

     this is father element this is father element this is father element

     this is father element this is father elementthis is father element

      this is father element this is father element 

      this is father elementthis is father element

     this is father element this is father element this is father element </ div >

      </ div >

     < div  class= "clear" ></ div >

     </ div >

.main{

     width:  200px;

     margin-right:  -200px;

     background:  yellow;

     color:  #fff;

}

.content{

     width:  200px;

     position:  relative;

     float:  right;

     margin-right:  -200px;

     background:  green;

     color:  #444;

}

.sub{

     position:  relative;

     float:  left;

     width:  200px;

     margin-left:  -200px;

     background:  yellow;

     color:  #444;

}

.clear{

     clear:  both;

}

三、三列自适应

1、两列固定，一列适应。

本质：适应的元素处于最内层嵌套元素。

< body >

     < div  class= "main" >       

     < div  class= "content" >

     < div  class= "left" >This is a highly adaptive exercise

      this is sub element

     </ div >

     < div  class= "change" >this is father element this is father element this is father element

     this is father element this is father element this is father elemen

     this is father element this is father element this is father element </ div >

      < div  class= "clear" ></ div >

      </ div >

      < div  class= "right" >This is a highly adaptive exercise

        This is a highly adaptive exercise

     </ div >

     < div  class= "clear" ></ div >

     </ div >   

</ body >

.main{

     width:  600px;

     background:  yellow;

}

.content{

     width:  45%;

     color:  #000;

     background:  #777;

     float:  left;

}

.right{

width:  55%;

color:  #000;

background:  yellow;

float:  right;

}

.left{

     float:  left;

     width:  50%;

}

.change{

     float:  right;

     width:  50%;

     background:  yellowgreen;

     color:  red;

     /**height: 250px;   

    当change高度小于left时，change必须设置一个合适于left的高度；

    当change高度大于left时，不必设置height**/

}

.clear{

     clear:  both;

}

2、两列可变，右列固定

< body >

     < div  class= "main" >       

     < div  class= "content" >

     < div  class= "all-left" >

     < div  class= "left" >This is a highly adaptive exercise

      this is sub element </ div >

     < div  class= "middle" >thihis is fais this is father elementt </ div >

      < div  class= "clear" ></ div > 

     </ div >

     </ div >

      < div  class= "right" >This is a highly adaptive exercise

        This is a highly adaptive exercise  </ div >

     < div  class= "clear" ></ div >

     </ div >   

</ body >

.main{

     width:  600px;

     background:  yellow;

}

.content{

     width:  150px;

     color:  #000;

     background:  #777;

     float:  left;

}

.all-left{

     position:  relative;

     float:  right;

     width:  150px;

     margin-right:  -150px;

     background:  yellowgreen;

     color:  red;

}

.left{

     position:  relative;

     float:  left;

     width:  150px;

     height:  100px;

     margin-left:  -150px;

}

.middle{

width: 150px;

color:  #000;

background:  yellowgreen;

float:  right;

}

.right{

     float:  right;

     width:  150px;

}

.clear{

     clear:  both;

}

3、三列高度均不确定

本质：在有宽边距的元素中嵌套子元素，当任何子元素增加时，父元素也增加。

< body >

     < div  class= "main" >       

      < div  class= "left" >This is a highly adaptive exercise this is sub element </ div >

     < div  class= "middle" >thihis is fais this is father elementt </ div >

      < div  class= "right" >This is a highly adaptive exercise This is a highly adaptive exercise  </ div >

     < div  class= "clear" ></ div >

     </ div >   

</ body >

.main{

     width:  150px;

     border-left:  150px  solid  #333;

     border-right:  150px  solid  #999;

     background:  yellow;

}

.left{

     position:  relative;

     float:  left;

     width:  150px;

     margin-left:  -150px; /**使用负边距将左边内容移到边框中**/

}

.middle{

width: 150px;

color:  #000;

background:  yellow;

float:  left;

}

.right{

     position:  relative;

     float:  right;

     width:  150px;

     margin-right:  -150px;

}

.clear{

     clear:  both;

}