css中div高度自适应

css中div高度自适应

       li高度自适应是个值得研究的问题,本文向大家介绍一些关于li高度自适应的技巧,希望对你的学习有所帮助。

一、高度的自适应(父li高度随子li的高度改变而改变)

1、如果父li不定义height、子li均为标准流的时候,父li的height随内容的变化而变化,实现父li高度随子li的高度改变而改变。

 

  •     CSS 代码   复制
  • 
    <style type="text/css">
     
         #aa{ border:#000000 solid 5px}
     
         #bb{border:#00ffff solid 5px;}
     
         #cc{ border:#0033CC solid 5px}
     
    </style>
     
    <li id="aa">父li
     
         <li id="bb">子li</li>
     
         <li id="cc">子li</li>
     
    </li>
    
    		
  • 2、如果父li定义height,子li均为标准流的时候,在IE下父li的height随内容变化而变化,ff中则固定大小,如父li设置height:50px

  •  
  • CSS 代码   复制
  • 
      <style type="text/css">
    
     
        #aa{ border:#000000 solid 5px;height:50px}
     
        #bb{border:#00ffff solid 5px;}
     
        #cc{ border:#0033CC solid 5px}
     
    </style>
     
    <li id="aa">父li
     
        <li id="bb">子li</li>
     
        <li id="cc">子li</li>
     
    </li>
    
    		
  • 3、如果子li使用了float属性,此时已经脱离标准流,父li不会随内容的高度变化而变化,解决的办法是在浮动的li下面,加一个空li,设置clear属性both

  •  
  • CSS 代码   复制
  • 
      <style type="text/css">
    
     
        #aa{ border:#000000 solid 5px;}
     
        #bb{border:#00ffff solid 5px;float:left}
     
        #cc{ border:#0033CC solid 5px;float:left}
     
    </style>
     
    <li id="aa">父li
     
        <li id="bb">子li</li>
     
        <li id="cc">子li</li>
     
       <li style="clear:both"></li>
     
    </li>
    
    		
  •  

    二、高度的自适应(子li高度随父亲li高度改变而改变)

    在有边框的情况下,你会发现同一个li,在ie下的高度和在FF下的高度是不一样的,比如你设置了高度为100px的li,边框是border:5px;IE的高度是5+5+空白区域=100px,而FF下高度是100px的li是不包括高度的,只是空白区域的高度。

  •  
  •    CSS 代码   复制
  • 
    <style type="text/css">
    
    #aa{ border:#000000 solid 5px;height:100px;}
    
    #bb{border:#00ffff solid 5px;float:left; height:100%}
    
    #cc{ border:#0033CC solid 5px;float:left}
    
    </style>
    
    <li id="aa">
    
    <li id="bb">子li</li>
    
    <li id="cc">子li</li>
    
    		
  • </li>如果没有设置边框,完全没有高度不一致的情况,子li适应父li很简单,如上面代码,只是在子li加了height:100%属性即可。

    有一点要注意,如果父li是body的话,也就是说一个body套了一个li,让li适合body的大小的,必须设置body的高度才能实现子li随body改变而改变,body{height:100%}

     

    三、加背景图片实现。

  •  
  •    CSS 代码   复制
  • 
    /*这个方法,很多大网站在使用,如163,sina等。*/
     
    /*XHTML代码:*/
    <li id="wrap">
     <li id="column1">这是第一列</li>
     <li id="column1">这是第二列</li>
     <li class="clear"></li>
    </li>  
     
    /*CSS代码:*/
     #wrap{width:776px;background:url(bg.gif)repeat-y300px;}    
     #column1{float:left;width:300px;}
     #column2{float:right;width:476px;}
     .clear{clear:both;}  
    
    			
  • 标签: