如何用jquery实现高度自适应

大家在有时的网页设计中，前端会出现这样一个问题，因为左侧的侧边导航只有几个链接，很短，而右边的正文部分有可能会很长，怎么才能让左侧的背景能一直随着右侧的内容高度的增加而增加呢？当然，这种解决方法有两种，一种就是让左侧的导航漂浮，在右侧下拉或者是窗口拉出了左侧的高度时置顶，像糗事百科右侧的广告那样，这种方法现在也很流行，不过，我们今天不讲这种，讲的是另一种方法，让左右两边的div的高度能一致，随时一致，如果内容是固定的话，好做，左右固定高度，如果右侧的内容不固定呢？还是有办法得！

创新互联建站是一家以成都网站建设、网页设计、品牌设计、软件运维、网站推广、小程序App开发等移动开发为一体互联网公司。已累计为成都水泥搅拌车等众行业中小客户提供优质的互联网建站和软件开发服务。

这种问题大多都是软件系统或者是一些后台中常用的，方法很简单，利用jquery获取右侧的高度，使得左侧和右侧的高度保持一致就OK啦！废话不多，上代码：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

htmlxmlns=""

head

metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/

titlejQuery实现左右div自适应高度完全相同/title

styletype="text/css"

!--

body{FONT-SIZE: 14px;background-color:#fff}

--

/style

styletype="text/css"

#left{background:#999999; float:left; width:100px;}

#right{background:#0066FF; color:#fff; width:300px; float:left;}

.clear{clear:both;}

/style

/head

body

h3右边高度高度左边/h3

divid="left"

divstyle="padding:10px"

美浩工作室br/

美浩工作室br/

美浩工作室br/

美浩工作室br/

美浩工作室br/

/div

/div

divid="right"

divstyle="padding:10px"

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

网站建设工作室br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

br/

画法几何大家看法

/div

/div

scripttype="text/javascript"src=""/script

scripttype="text/javascript"

function $(id){

return document.getElementById(id)

}

function getHeight() {

if ($("left").offsetHeight=$("right").offsetHeight){

$("right").style.height=$("left").offsetHeight + "px";

}

else{

$("left").style.height=$("right").offsetHeight + "px";

}

}

window.onload = function() {

getHeight();

}

/script

divstyle="clear:both"/div

/body

/html

这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别。

这四种浏览器分别为IE（Internet

Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight

大家对 clientHeight

都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight

IE、Opera

认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight

是网页内容实际高度，可以小于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight

是网页内容实际高度，可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是

clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为

offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight

的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight

是可视区域 clientHeight 滚动条加边框。scrollHeight

则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth

的解释与上面相同，只是把高度换成宽度即可。

说明

以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional

则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE

来启用不同的解释器。下载或浏览测试文件。

关系公式:scrollHeight = offsetHeight+ scrollTop

上面的方法大家明白了吗？赶紧复制下来运行下，看看效果吧！！！！大家在用的时候给自己要同样高度的两个div加上id，在jquery里面调用的标识修改即可！很方便的，那个jquery.min.js大家可以任意下载，哪里都有的！

jquery动态创建iframe并自适应宽度和高度

自适应谁的宽高？

script type="text/javascript"

$(document).ready(function(){

var if_w=$("body").width();

var if_h=$(window).height();

alert(if_w+"---"+if_h)

$("iframe src='' width='"+if_w+"' height='"+if_h+"' /").prependTo('body');

});

/script

jquery 使页面页面高度自适应，resize()中重新计算

同意上面的。

可以用百分比。

不过你要先把这几个容器都放到一个大容器里面

然后大容器的高度用js去计算，设定为浏览器窗口的高度，这样父级有了具体的高度，里面的高度使用百分比才有意义。。

教你用jquery实现iframe自适应高度

iframe代码，注意要写ID

复制代码

代码如下:

iframe

src="test.html"

id="main"

width="700"

height="300"

frameborder="0"

scrolling="auto"/iframe

jquery代码一：

复制代码

代码如下:

//注意：下面的代码是放在test.html调用

$(window.parent.document).find("#main").load(function(){

var

main

=

$(window.parent.document).find("#main");

var

thisheight

=

$(document).height()+30;

main.height(thisheight);

});

jquery代码二：

复制代码

代码如下:

//注意：下面的代码是放在和iframe同一个页面调用

$("#main").load(function(){

var

mainheight

=

$(this).contents().find("body").height()+30;

$(this).height(mainheight);

});

jquery iframe 自适应高度的方法 高分求，

一般调用iframe外部应用页面，还是要遵循本页面设置样式的，比如用户须知的iframe调用！

至于高度自适应，同样可以用css('overflow','hidden')；

希望帮到你了！

分享标题：jquery自适应高度,css高度自适应怎么实现
分享网址：http://csdahua.cn/article/dssesig.html