关于div自适应高度/左右高度自适应一致的js代码

 更新时间:2013年03月22日 16:56:11   转载 作者:  
在DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题,本文将介绍左右自适应高度一致的Jquery与DIV高度自适应屏幕的js
在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题。
为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致。

左右自适应高度一致 Jquery
复制代码 代码如下:

<div style="width:300px;">
<div id="Left" style="float:left;background-color:blue;">1<br/>3<br/>5<br/></div>
<div id="Right" style="float:right;background-color:red;">2</div>
</div>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var heightLeft= $("#Left").height();
var heightRight= $("#Right").height();
if (heightLeft > heightRight)
{
$("#Right").height(heightLeft);
}
else
{
$("#Left").height(heightRight);
}
})
</script>

DIV高度自适应屏幕 js
复制代码 代码如下:

<div id="top" style="height="200px;"></div>
<div id="box">dsafsafsafsafsafdsa</div>
<script>
window.onload=function (){
function auto_height()
{
//var h= document.documentElement.clientHeight-200;
//var high = document.getElementById("box");
//high.style.height=h+"px";
document.getElementById("box").style.height=document.documentElement.clientHeight-200+"px";
}
auto_height();
onresize=auto_height;
}
</script>

相关文章

  • react实现移动端下拉菜单的示例代码

    react实现移动端下拉菜单的示例代码

    这篇文章主要介绍了react实现移动端下拉菜单的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • javascript trim 去空格函数实现代码

    javascript trim 去空格函数实现代码

    去除字符串左右两端的空格,在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim,但在js中却没有这3个内置方法,需要手工编写。下面的实现方法是用到了正则表达式,效率不错,并把这三个方法加入String对象的内置方法中去。
    2008-10-10
  • 用JS实现一个页面多个css样式实现

    用JS实现一个页面多个css样式实现

    在Hello,Yang中看见的一篇文章,感觉很有用,转来这里……
    2008-05-05
  • Javascript实现秒表计时游戏

    Javascript实现秒表计时游戏

    这篇文章主要为大家详细介绍了Javascript实现秒表计时游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 仅IE不支持setTimeout/setInterval函数的第三个以上参数

    仅IE不支持setTimeout/setInterval函数的第三个以上参数

    setTimeout/setInterval,这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用
    2011-05-05
  • javascript 操作cookies及正确使用cookies的属性

    javascript 操作cookies及正确使用cookies的属性

    在 JS(JavaScript) 操作cookies比较复杂,在 ASP 里面我们只需要知道 cookie 的名称、cookie 的值就行了,而 JS 里面,我们面对的是 cookie 的字符串,你自己编写这个字符串写入客户端,然后自己解析这个字符串。
    2009-10-10
  • JS实现支持多选的遍历下拉列表代码

    JS实现支持多选的遍历下拉列表代码

    这篇文章主要介绍了JS实现支持多选的遍历下拉列表代码,涉及javascript遍历select及设置css属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • setTimeout()与setInterval()方法区别介绍

    setTimeout()与setInterval()方法区别介绍

    计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助
    2013-12-12
  • js 动态给元素添加、移除事件的实现方法

    js 动态给元素添加、移除事件的实现方法

    下面小编就为大家带来一篇js 动态给元素添加、移除事件的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • CountUp.js数字滚动插件使用方法详解

    CountUp.js数字滚动插件使用方法详解

    这篇文章主要为大家详细介绍了CountUp.js数字滚动插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论