您好,登录后才能下订单哦!
这篇文章主要介绍“实现CSS中div列高度自适的3种方式”,在日常操作中,相信很多人在实现CSS中div列高度自适的3种方式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”实现CSS中div列高度自适的3种方式”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
CSS技巧:解决div列高度自适的3种常用方法
解决div列高度自适的方法有很多种,这里介绍三种最常用的方法给大家(下面所有例子以父main,子divleft、divright为例)。
1、利用“clear:both”背景填充
这是使用最广泛的一种做法,我一直都用此方法解决div列高度自适问题。三行二列布局,主要内容在右边,网页宽度780px,左列240px,右列540px。
CSS代码:
#main{ width:780px; margin:0; background:url(bg.gif)#FFFFFFrepeat-yleft; text-align:left; } #divleft{ float:left; width:240px; } #divright{ float:right; width:540px; } .clear{ border-top:1pxsolidtransparent!important; margin-top:-1px!important; border-top:0; margin-top:0; clear:both; visibility:hidden; }
html代码:
<dividdivid="main"> <dividdivid="divleft"></div> <dividdivid="divright"></div> <divclassdivclass="clear"></div> </div>
优点:无hacks,完全的自适应高度。
2、脚本控制DIV列高度
在<body>中加入如下代码(假设divright的高度相对***):
<scriptlanguagescriptlanguage="javascript"> document.getElementById"divleft") .style.height=document.getElementById"divright") .scrollHeight+"px" </script>
优点:代码超级简单
缺点:要确定有某一列的高度始终是相对***的,此方法比较被动。
3、margin负值父子容器高度继承
这个方法能较好地解决DIV列高度相同的问题。三行二列布局,主要内容在左边,网页宽度780px,左列540px,右列240px。
CSS代码:
#main{ width:540px; float:left; background:#FFFFFF; text-align:left; } #divleft{ width:540px; float:left; position:relative; margin-left:-540px; } #divright{ width:240px; float:right; position:relative; margin:0-240px00; background:#F0F0F0; }
html代码:
<dividdivid="main"> <dividdivid="divleft"> <dividdivid="divright"></div> </div> </div>
或许刚接触的WebStandards的朋友对这种方法不怎么理解,现Blank分析一下:
[A]
[B][C]
上结构中a包含c,c包含b。当b的高度为***时,那么a和c将继承b的高度,如果a和b位置重合,将显示b的背景;而当c的高度***时,那么a继承将继承c的高度,如果a和b位置重合,将显示a的背景。这样无论b***或者c***都将显示div列高度相同。
优点:兼有***种方法的优点,并且比***种方法的代码稍微简洁。
缺点:整体结构只能左对齐。
到此,关于“实现CSS中div列高度自适的3种方式”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。