如何用jquery实现高度自适应
2个回答
推荐于2016-06-08 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
采纳数：117538
获赞数：517195
长期从事计算机组装，维护，网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。
向TA提问 私信TA
关注
![]()
展开全部
大家在有时的网页设计中，前端会出现这样一个问题，因为左侧的侧边导航只有几个链接，很短，而右边的正文部分有可能会很长，怎么才能让左侧的背景能一直随着右侧的内容高度的增加而增加呢？当然，这种解决方法有两种，一种就是让左侧的导航漂浮，在右侧下拉或者是窗口拉出了左侧的高度时置顶，像糗事百科右侧的广告那样，这种方法现在也很流行，不过，我们今天不讲这种，讲的是另一种方法，让左右两边的div的高度能一致，随时一致，如果内容是固定的话，好做，左右固定高度，如果右侧的内容不固定呢？还是有办法得！
这种问题大多都是软件系统或者是一些后台中常用的，方法很简单，利用jquery获取右侧的高度，使得左侧和右侧的高度保持一致就OK啦！废话不多，上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>jQuery实现左右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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></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获取右侧的高度，使得左侧和右侧的高度保持一致就OK啦！废话不多，上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>jQuery实现左右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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></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大家可以任意下载，哪里都有的！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-01-10 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
代码参考：
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>jquery实现div自适应浏览器高度（宽度）</title> <meta name="keywords" content="html5" /> <meta name="description" content="html5 test" /> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> function autoHeight() { var h = $(window).height(); var h_old = 300; if (h > h_old) { $(".left").css('height', h); } else { return false; } } $(function() { autoHeight() $(window).resize(autoHeight); }) </script> <style type="text/css"> html, body { margin: 0; height: 100%; } .left { width: 100px; background: #E8EFF6; margin-left: 100px; } </style> </head> <body> <div class="left"> das </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>jquery实现div自适应浏览器高度（宽度）</title> <meta name="keywords" content="html5" /> <meta name="description" content="html5 test" /> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> function autoHeight() { var h = $(window).height(); var h_old = 300; if (h > h_old) { $(".left").css('height', h); } else { return false; } } $(function() { autoHeight() $(window).resize(autoHeight); }) </script> <style type="text/css"> html, body { margin: 0; height: 100%; } .left { width: 100px; background: #E8EFF6; margin-left: 100px; } </style> </head> <body> <div class="left"> das </div> </body> </html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
