让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。
1、JS法
代码如下。原理:用JS判断左右DIV的高度,若不一致则设为一致。前端资源分享
01 |
< div style = "width:500px;background:#cccccc;height:0px;" >
|
02 |
< div id = "right" style = "width:380%;height:100%;float:left;border:1px solid #265492;" >left</ div >
|
03 |
< div id = "left" style = "width:60%;;float:left;background:#376037;" >
|
13 |
< script type = "text/javascript" >
|
2、背景图填充法
这是大站用得比较多的方法,如163等,研究了一下,结果如下。
这里是给父DIV设置了背景图片填充,所有DIV都不设高度。前端资源分享
HTML代码:
2 |
< div class = "col1" >第一列 左边正文</ div >
|
3 |
< div class = "col3" >第二列 右边< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />字字</ div >
|
4 |
< div class = "col2" >第三列 中间图片</ div >
|
5 |
< div class = "clear" ></ div >
|
CSS代码:
1 |
.endArea{ margin : 0 auto ; width : 960px ; background : url (http://cimg 2.163 .com/cnews/img 07 /end_n_bg 1 .gif); clear : both ;}
|
2 |
.endArea .col 1 { float : left ; width : 573px ; }
|
3 |
.endArea .col 2 { float : left ; width : 25px ; }
|
4 |
.endArea .col 3 { float : right ; width : 362px ;}
|
3、补丁大法
就是“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类的方法,在IE6、IE7、FF3下测试通过。要点:
1、父DIV设置 overflow:hidden;框架资源分享
2、对要高度自适应的DIV设置 padding-bottom:100000px;margin-bottom:-100000px; 两列或多列同理。
代码如下:
03 |
< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />
|
04 |
< title >Div高度自适应</ title >
|
05 |
< style type = "text/css" >
|
06 |
#wrap{overflow:hidden;} |
07 |
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} |
11 |
< div id = "wrap" style = "width:300px; background:#FFFF00;" >
|
12 |
< div id = "sidebar_left" style = "float:left;width:100px; background:#777;" >居左</ div >
|
13 |
< div id = "sidebar_mid" style = "float:left;width:100px; background:#999;" >
|
21 |
</ div >< div id = "sidebar_right" style = "float:right;width:100px; background:#888;" >居右</ div ></ div >
|
以上三种方法都可以解决Div高度自适应,请根据你自己的需要,三选一。
分享到:
相关推荐
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
div+css高度自适应div+css高度自适应div+css高度自适应div+css高度自适应
用JS+CSS来实现DIV层自适应高度,无论你的浏览器大小如何变化都会自适应高度, 调节宽度同样的道理
主要介绍了JS实现DIV高度自适应窗口的方法,结合完整实例形式分析了JS通过动态操作页面元素属性实现高度自适应的相关技巧,需要的朋友可以参考下
div+CSS自适应高度,需要的朋友请下载
解决textarea文字太多无法高度自适应问题,使用div模拟textarea
如何用js加css控制div自适应高度问题完美解决方法
在最外层div加以下样式 height:100%; overflow:hidden;...我们可以通过三种方法来解决这个问题 1增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。 复制代码代码如下: <div id=”m
怎样让一个div高度自适应浏览器高度在应用中很常见,感兴趣的朋友可以参考下哈,希望对你有所帮助
在DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题,本文将介绍左右自适应高度一致的Jquery与DIV高度自适应屏幕的js
由于项目需要,手写一个能够使两个DIV高度自适应相等 类似好123的左右大框 (因为本人CSS样式不是很好,边线省略1像素)
当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。
css边框背景阴影 DIV自适应宽度 背景色渐变、透明 多行自适应浏览器高度 圆角div 固定高度div,随内容自动变高css定义方法等等
自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例
最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight,介绍一下几种不同的获得方式以及他们的差别
脚本控制DIV三行三列布局自适应高度
demo包括: 1、多个div并排,宽度自适应100% - 左右两侧div宽度固定,中间DIV占满剩余区域 ; 2、多个div,高度自适应100% - 页面布局:头,身体,脚,占满整个屏幕;
但是一旦设置了 height以后,FIrefox就不会自适应div的高度了。所以只能两个属性都不用,干干净净地写<div>Jimbor Studio</div>。 2.即使不设置固定高度,Firefox对高度的自适应也不那么尽人意。如果需要在一个层内...