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

2024-09-29 14:48:18

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";
}

我想用脚本来控制自适应高度，我用上面的代码控制了左列和右列的自适应高度。
可是有的页面因为内容多被撑得挺长，有的页面内容少，用上面的代码不能缩短了！
我就是想在访问内容少的时候，内容还能再缩回来，代码应该怎么写呢？谢谢了！

代码如下:

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

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

根石家，根雕，木雕

内容left

55×65
60×80
90×90
110×73
118×53
146×53
170×65
其它

内容1

内容2

内容3

内容4

内容5

内容6

内容7

内容8

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

根石家，根雕，木雕

CL.clientHeight){sideleft=CL.scrollHeight}
var sideright=CR.clientHeight;
if(CR.scrollHeight>CR.clientHeight){sideright=CR.scrollHeight}
layoutHeight=Math.max(sideleft,sideright);
CL.style.height=CR.style.height=layoutHeight+"px";
}
function setm(x) {
for (i=1;i

内容left

55×65
60×80
90×90
110×73
118×53
146×53
170×65
其它

内容1

内容2

内容3

内容4

内容5

内容6

内容7

内容8

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

就是这几行代码：

代码如下:

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

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

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

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

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

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

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

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

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

function vvheight() { var sideleft=document.getElementById("content-left").scrollHeight; var sideright=document.getElementById("content-right").scrollHeight; layoutHeight=Math.max(sideleft,sideright); docume
脚本控制三行三列自适应高度DIV布局的代码

复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><
脚本控制三行三列自适应高度DIV布局

这个例子是用JS脚本控制并列DIV的高度,通常在DIV布局中,自适应高度一直是比较头疼的问题,一般大都采用背景图.外套DIV.右栏覆盖左栏......来解决.现在加了脚本后,简单多了,假如有三个水平并列的DIV,fbox.mbox. sbox,只要在<body>标签中写入:onload="P7_equalCols('fbox','mbox','sbox')",测试条件:ie5.x.ie6.0.FF1.03.NS7.2.opera8.01.最终效果. JS代码:版权归原作者
兼容主流浏览器的iframe自适应高度js脚本

兼容主流浏览器的 Iframe 自适应高度,js脚本如下: 复制代码代码如下: //iframe 高度自适应 function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.bod
js实现iframe自动自适应高度的方法

本文实例讲述了js实现iframe自动自适应高度的方法.分享给大家供大家参考.具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长.删除数据后,iframe高度要自动缩短. 将下一段代码拷贝到iframe所在那个html或者jsp页面.在</html>标签后,调用此函数即可. <script type="text/javascript"> autoAdjus
基于jQuery实现左右div自适应高度完全相同的代码

在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm完整代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo
JS解决iframe之间通信和自适应高度的问题

首先说明下,iframe通信分为:同域通信和跨域通信. 一. 同域通信所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe 比如: <iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA">的B.html页面,这两个页面数据进行通信
使用jQuery不判断浏览器高度解决iframe自适应高度问题

这里介绍两个超级简单的方法,不用写什么判断浏览器高度.宽度啥的. 下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的. 注意别放错了地方. iframe的代码中,注意要写ID,没有ID查找不到复制代码代码如下: <iframe src="test.html" id="main" width="700" height="300" frameborder="0&q
javascript原生和jquery库实现iframe自适应高度和宽度

javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginh
div实现自适应高度的textarea实现angular双向绑定

相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了. textarea不是不可以的,然后我是这样错的.(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫 textarea.bind('change','keydown'){ if(scrollTop > 0 ) { textarea.rows += 1 } } 正确的

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

相关推荐

随机推荐