打印

脚本控制自适应高度的缩短问题！

xyuehui123 [楼主]

初级会员

帖子: 81
体力: 174
威望: 0
当前: 天津南开
离线: 195 天

1^# 大中小发表于 2007-10-17 10:43

function vvheight() {
var sideleft=document.getElementById("content-left").scrollHeight;
var sideright=document.getElementById("content-right").scrollHeight;
layoutHeight=Math.max(sideleft,sideright);
document.getElementById("content-left").style.height=layoutHeight+"px";
document.getElementById("content-right").style.height=layoutHeight+"px";
}

我想用脚本来控制自适应高度，我用上面的代码控制了左列和右列的自适应高度。

可是有的页面因为内容多被撑得挺长，有的页面内容少，用上面的代码不能缩短了！

我就是想在访问内容少的时候，内容还能再缩回来，代码应该怎么写呢？谢谢了！

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

xyuehui123 [楼主]

初级会员

帖子: 81
体力: 174
威望: 0
当前: 天津南开
离线: 195 天

2^# 大中小发表于 2007-10-17 11:29

自己顶一下！希望大家帮帮忙！

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

bound0

老饕

版主

帖子: 3480
体力: 8561
威望: 273
当前: 北京海淀区

专长 JS,Perl,产品设计

3^# 大中小发表于 2007-10-17 11:52

"智能化"的自适应。

复制内容到剪贴板

代码:

function vvheight() {

    var CL=document.getElementById("content-left");

    var CR=document.getElementById("content-right");

    while(parseInt(CL.scrollHeight)==parseInt(CL.style.height)){CL.style.height=parseInt(CL.style.height)-30+"px"}

    var sideleft=CL.scrollHeight;

    while(parseInt(CR.scrollHeight)==parseInt(CR.style.height)){CR.style.height=parseInt(CR.style.height)-30+"px"}

    var sideright=CR.scrollHeight;

    layoutHeight=Math.max(sideleft,sideright);

    CL.style.height=layoutHeight+"px";

    CR.style.height=layoutHeight+"px";

}

如果可用的话，希望楼主能贴出最终效果的代码或链接。方便大家学习。

[ 本帖最后由 bound0 于 2007-10-17 11:53 编辑 ]

[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群：45274013

TOP

掌握加薪筹码 IT薪资宝典给您答案！ | 《疯狂的程序员》劲爆上市

xyuehui123 [楼主]

初级会员

帖子: 81
体力: 174
威望: 0
当前: 天津南开
离线: 195 天

4^# 大中小发表于 2007-10-17 14:04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="yuehui|395959@qq.com|xyuehui888@msn.com" />
<meta name="copyright" content="yuehui|395959@qq.com|xyuehui888@msn.com" />
<meta name="description" content="根石家,根雕,木雕,艺术,作品,根书画,介绍" />
<meta name="keywords" content="根石家,根雕,木雕,艺术,作品,根书画,介绍" />
<title>根石家，根雕，木雕</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="mainbox">
	<div id="header">
	</div>
	<div id="content-left">
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
	</div>
	<div id="content-right">
		<ul id="menu">
			<li onclick="setm(1)"><a href="#" id="m1" onclick="vvheight()">55×65</a></li>
			<li onclick="setm(2)"><a href="#" id="m2" onclick="vvheight()">60×80</a></li>
			<li onclick="setm(3)"><a href="#" id="m3" onclick="vvheight()">90×90</a></li>
			<li onclick="setm(4)"><a href="#" id="m4" onclick="vvheight()">110×73</a></li>
			<li onclick="setm(5)"><a href="#" id="m5" onclick="vvheight()">118×53</a></li>
			<li onclick="setm(6)"><a href="#" id="m6" onclick="vvheight()">146×53</a></li>
			<li onclick="setm(7)"><a href="#" id="m7" onclick="vvheight()">170×65</a></li>
			<li onclick="setm(8)"><a href="#" id="m8" onclick="vvheight()">其它</a></li>
		</ul>
		<div style="clear:both"></div>
		<ul id="con1">
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
		</ul>
		<ul id="con2">
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
		</ul>
		<ul id="con3">
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
		</ul>
		<ul id="con4">
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
		</ul>
		<ul id="con5">
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
		</ul>
		<ul id="con6">
			内容6 
			内容6 
			内容6 
			内容6 
			内容6 
			内容6 
		</ul>
		<ul id="con7">
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
		</ul>
		<ul id="con8">
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
		</ul>
	</div>
	<div style="clear:both"></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

提示：您可以先修改部分代码再运行

上面这是我的代码，我想用脚本实现自适应高度，在内容多的时候都能被撑大，在内容少的时候还能缩回来。
我用了楼主版主给的代码也没有成功！（出现黑色背景就失败了）

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

bound0

老饕

版主

帖子: 3480
体力: 8561
威望: 273
当前: 北京海淀区

专长 JS,Perl,产品设计

5^# 大中小发表于 2007-10-17 17:48

如果一开始你就给出完整的应用代码就不会这样周折了：

在IE和Opera里，DIV的style.overflowY的默认值是"auto"，上面的代码不会有问题。

在Firefox和Safari里，DIV的style.overflowY的默认值是""(相当于"hidden")，所以你直接用上面代码的话，会出错。需要人为调整style.overflowY="auto"。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="yuehui|395959@qq.com|xyuehui888@msn.com" />
<meta name="copyright" content="yuehui|395959@qq.com|xyuehui888@msn.com" />
<meta name="description" content="根石家,根雕,木雕,艺术,作品,根书画,介绍" />
<meta name="keywords" content="根石家,根雕,木雕,艺术,作品,根书画,介绍" />
<title>根石家，根雕，木雕</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="mainbox">
	<div id="header">
	</div>
	<div id="content-left">
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
	</div>
	<div id="content-right">
		<ul id="menu">
			<li onclick="setm(1)"><a href="#" id="m1" onclick="vvheight()">55×65</a></li>
			<li onclick="setm(2)"><a href="#" id="m2" onclick="vvheight()">60×80</a></li>
			<li onclick="setm(3)"><a href="#" id="m3" onclick="vvheight()">90×90</a></li>
			<li onclick="setm(4)"><a href="#" id="m4" onclick="vvheight()">110×73</a></li>
			<li onclick="setm(5)"><a href="#" id="m5" onclick="vvheight()">118×53</a></li>
			<li onclick="setm(6)"><a href="#" id="m6" onclick="vvheight()">146×53</a></li>
			<li onclick="setm(7)"><a href="#" id="m7" onclick="vvheight()">170×65</a></li>
			<li onclick="setm(8)"><a href="#" id="m8" onclick="vvheight()">其它</a></li>
		</ul>
		<div style="clear:both"></div>
		<ul id="con1">
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
		</ul>
		<ul id="con2">
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
		</ul>
		<ul id="con3">
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
		</ul>
		<ul id="con4">
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
		</ul>
		<ul id="con5">
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
		</ul>
		<ul id="con6">
			内容6 
			内容6 
			内容6 
			内容6 
			内容6 
			内容6 
		</ul>
		<ul id="con7">
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
		</ul>
		<ul id="con8">
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
		</ul>
	</div>
	<div style="clear:both"></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

提示：您可以先修改部分代码再运行

下面这个算法略有不同，你看哪一个效果更好（变化的瞬间人眼睛感觉到的闪烁更小）？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="yuehui|395959@qq.com|xyuehui888@msn.com" />
<meta name="copyright" content="yuehui|395959@qq.com|xyuehui888@msn.com" />
<meta name="description" content="根石家,根雕,木雕,艺术,作品,根书画,介绍" />
<meta name="keywords" content="根石家,根雕,木雕,艺术,作品,根书画,介绍" />
<title>根石家，根雕，木雕</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="mainbox">
	<div id="header">
	</div>
	<div id="content-left">
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
		内容left 
	</div>
	<div id="content-right">
		<ul id="menu">
			<li onclick="setm(1)"><a href="#" id="m1" onclick="vvheight()">55×65</a></li>
			<li onclick="setm(2)"><a href="#" id="m2" onclick="vvheight()">60×80</a></li>
			<li onclick="setm(3)"><a href="#" id="m3" onclick="vvheight()">90×90</a></li>
			<li onclick="setm(4)"><a href="#" id="m4" onclick="vvheight()">110×73</a></li>
			<li onclick="setm(5)"><a href="#" id="m5" onclick="vvheight()">118×53</a></li>
			<li onclick="setm(6)"><a href="#" id="m6" onclick="vvheight()">146×53</a></li>
			<li onclick="setm(7)"><a href="#" id="m7" onclick="vvheight()">170×65</a></li>
			<li onclick="setm(8)"><a href="#" id="m8" onclick="vvheight()">其它</a></li>
		</ul>
		<div style="clear:both"></div>
		<ul id="con1">
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
			内容1 
		</ul>
		<ul id="con2">
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
			内容2 
		</ul>
		<ul id="con3">
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
			内容3 
		</ul>
		<ul id="con4">
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
			内容4 
		</ul>
		<ul id="con5">
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
			内容5 
		</ul>
		<ul id="con6">
			内容6 
			内容6 
			内容6 
			内容6 
			内容6 
			内容6 
		</ul>
		<ul id="con7">
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
			内容7 
		</ul>
		<ul id="con8">
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
			内容8 
		</ul>
	</div>
	<div style="clear:both"></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群：45274013

TOP

xyuehui123 [楼主]

初级会员

帖子: 81
体力: 174
威望: 0
当前: 天津南开
离线: 195 天

6^# 大中小发表于 2007-10-18 10:20

谢谢bound0的热心指点了！非常感动！
您的代码非常完美！只是我是初学者有些地方没看懂！

就是这几行代码：

while(CL.scrollHeight==CL.clientHeight){CL.style.height=CL.clientHeight-30+"px"}
var sideleft=CL.scrollHeight;
while(CR.scrollHeight==CR.clientHeight){CR.style.height=CR.clientHeight-30+"px"}

您能不能给解释一下？为什么要比较scrollHeight和clientHeight，30像素这个值是怎么来的呢？谢谢您了

TOP

bound0

老饕

版主

帖子: 3480
体力: 8561
威望: 273
当前: 北京海淀区

专长 JS,Perl,产品设计

7^# 大中小发表于 2007-10-18 17:02

没有太多时间，就先随便讲一讲吧。如果感兴趣的人多，以后我可以开一些这样的专题，或者写到书里去。

元素的scrollHeight属性是微软在IE中首创的DHTML属性，并非W3C规范或技术推荐标准的内容，但是现在几乎所有的浏览器都在支持这个属性（这是因为W3C标准中并没有相应的替代方案——因此我通常不提“标准”二字，而总是说“兼容、可用”）。scrollHeight是元素在内部不出现纵向滚动条的情况下在页面上显示时将占据的高度（像素数）。

clientHeight也不是W3C规范的东西（事实上，很多有用的东西都与“标准”无关，但它们是事实上的标准）。clientHeight是元素在页面中显示时实际占据的高度（像素数）。

如果使元素内部不出现纵向滚动条（给元素足够多的空间，令其可以完整显示；或者将其纵向滚动条禁用，也就是将style.overflowY设为"hidden"），则scrollHeight==clientHeight。

在滚动条出现时，clientHeight < scrollHeight，元素未能在页面上完整显示，若要令其完整显示，则至少需要scrollHeight像素高度的空间。

也就是，元素内部出现纵向滚动条时，scrollHeight就是令元素得以完整显示的最小高度。

在上面第一个例子中，我不断缩短DIV的高度（每次缩短30像素），直到DIV内部滚动条出现，取此时的scrollHeight值。

在第二个例子中，我直接把DIV高度设为1像素，迫使其内部出现滚动条，取scrollHeight值。

在我的显示器上，两个例子没有明显的差别。你可以把显示器的刷新频率调到最低，看看哪一种方式在变化的瞬间闪烁更小，择优用之。

[ 本帖最后由 bound0 于 2007-10-18 17:03 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群：45274013

TOP

xyuehui123 [楼主]

初级会员

帖子: 81
体力: 174
威望: 0
当前: 天津南开
离线: 195 天

8^# 大中小发表于 2007-10-18 17:17

看了您的讲解我学到了很多知识！非常实用！基本上理解了，我会再继续消化一下！

再次感谢您，希望其它网友也学习一下！bound0版主的两个代码是我见过的自适应高度最完美的。实现了自动撑大和自动缩回，而且各个浏览器无HACK！
我在实用中采用了第二个例子中的代码，我觉得这个在解释的时候浏览器做的工作量小一点！

PS:bound0 版主不知您有自己的博客吗？我想多看一些您写的东西！

TOP

bound0

老饕

版主

帖子: 3480
体力: 8561
威望: 273
当前: 北京海淀区

专长 JS,Perl,产品设计

9^# 大中小发表于 2007-10-19 18:47

回复 #8 xyuehui123 的帖子

嗯，Blog这么高级的东西我还没有呢。最近在写一本书，也不知会写成什么样子。

[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群：45274013

TOP

xyuehui123 [楼主]

初级会员

帖子: 81
体力: 174
威望: 0
当前: 天津南开
离线: 195 天

10^# 大中小发表于 2007-10-19 22:05

引用:

原帖由 bound0 于 2007-10-19 18:47 发表
嗯，Blog这么高级的东西我还没有呢。最近在写一本书，也不知会写成什么样子。

谦虚！一般能写书的都有几把刷子！期待您的书！

TOP

gogeren

中级会员

帖子: 194
体力: 327
威望: 0
当前: 广东深圳
离线: 27 天

11^# 大中小发表于 2007-11-21 11:48

強烈要求他发寫博客！！

再請問，有什麽JS的新手教程可以推薦下？

TOP

jsw0528

蓝蓝的神仙

高级会员

帖子: 516
体力: 857
威望: 0
当前: 江苏南京

专长 PHP,ASP,UE

12^# 大中小发表于 2008-9-27 09:48

回复板凳 bound0 的帖子

学习了，怎么也不给自己加个精

承接ASP定制，http://08-if.cn/

TOP

cnpinfo

新手上路

帖子: 4
体力: 13
威望: 0
当前: 黑龙江哈尔滨

13^# 大中小发表于 2008-10-20 09:16

受益很深，终于明白了，学习！

TOP

moona

新手上路

帖子: 14
体力: 34
威望: 0
当前: 浙江杭州
离线: 12 天

14^# 大中小发表于 2008-11-13 15:42

学习了顶一下期待js深入的教程

TOP

脚本控制自适应高度的缩短问题！

"智能化"的自适应。

代码:

回复 #8 xyuehui123 的帖子

引用:

回复 板凳 bound0 的帖子

回复板凳 bound0 的帖子