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

所属分类: 网络编程 / JavaScript 阅读数: 274
收藏 0 赞 0 分享
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";
}

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

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

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

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

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

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

[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值。

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

layui table 复选框跳页后再回来保持原来选中的状态示例

今天小编就为大家分享一篇layui table 复选框跳页后再回来保持原来选中的状态示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue-Cli项目优化操作的实现

这篇文章主要介绍了Vue-Cli项目优化操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

这篇文章主要介绍了解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题,本文给大家总结的非常详细,需要的朋友可以参考下
收藏 0 赞 0 分享

vue 父组件通过v-model接收子组件的值的代码

这篇文章主要介绍了vue 父组件通过v-model接收子组件的值的代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue 全局环境切换问题

小编在开发使经常会碰到全局切换问题,今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

element-ui 本地化使用教程详解

这篇文章主要介绍了element-ui 本地化使用教程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

在Vue项目中,防止页面被缩放和放大示例

今天小编就为大家分享一篇在Vue项目中,防止页面被缩放和放大示例,具有很好的参考 价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue h5移动端禁止缩放代码

今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue 3.0双向绑定原理的实现方法

这篇文章主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

nest.js 使用express需要提供多个静态目录的操作方法

这篇文章主要介绍了nest.js 使用express需要提供多个静态目录的操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多