您的位置：首页 > Web前端 > css > 正文

css中div高度自适应

更多时间：2013-10-2 类别：Web前端浏览量：3409

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;}

标签：css div

上一篇：css中的float的使用

下一篇：C#中的属性、和字段的区别

您可能感兴趣

css中div高度自适应

css中div高度自适应

热门推荐

排行榜