|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有账号?注册
×
- 解决div列高度自适的方法有很多种,这里介绍三种最常用的方法给大家(下面所有例子以父main,子divleft、divright为例)。
- 1、利用“clear:both”背景填充(推荐!!!)
- 这是使用最广泛的一种做法,我一直都用此方法解决div列高度自适问题。三行二列布局,主要内容在右边,网页宽度780px,左列240px,右列540px。
- CSS代码:
- #main{
- width: 780px;
- margin: 0;
- background: url(bg.gif) #FFFFFF repeat-y left;
- text-align: left;
- }
- #divleft{
- float: left;
- width: 240px;
- }
- #divright{
- float: right;
- width: 540px;
- }
- .clear{
- border-top:1px solid transparent !important;
- margin-top:-1px !important;
- border-top:0;
- margin-top:0;
- clear:both;
- visibility:hidden;
- }
- html代码:
- <div id="main">
- <div id="divleft"></div>
- <div id="divright"></div>
- <div class="clear"></div>
- </div>
- 优点:无hacks,完全的自适应高度。
- 2、脚本控制高度
- 在<body>中加入如下代码(假设divright的高度相对最高):
- <script language="javascript">
- document.getElementById"divleft").style.height=document.getElementById"divright").scrollHeight+"px"
- </script>
- 优点:代码超级简单
- 缺点:要确定有某一列的高度始终是相对最高的,此方法比较被动。
- 3、margin负值父子容器高度继承
- 这个方法能较好地解决列高度相同的问题。三行二列布局,主要内容在左边,网页宽度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 -240px 0 0;
- background: #F0F0F0;
- }
- html代码:
- <div id="main">
- <div id="divleft">
- <div id="divright"></div>
- </div>
- </div>
- 或许刚接触的Web Standards的朋友对这种方法不怎么理解,现Blank分析一下:
- [A]
- [B][C]
- 上结构中a包含c,c包含b。当b的高度为最高时,那么a和c将继承b的高度,如果a和b位置重合,将显示b的背景;而当c的高度最高时,那么a继承将继承c的高度,如果a和b位置重合,将显示a的背景。这样无论b最高或者c最高都将显示div列高度相同。
- 优点:兼有第一种方法的优点,并且比第一种方法的代码稍微简洁。
- 缺点:整体结构只能左对齐。
复制代码 |
|