页面导航：
→ 正文内容 div自适应高度
基于jQuery实现左右div自适应高度完全相同的代码
最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别
在线演示：完整代码： 代码如下: &!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/ charset=utf-8" /& &title&jQuery实现左右div自适应高度完全相同 - 脚本之家&/title& &meta name="Copyright" content="脚本分享网 http://www.jb51.net/" /& &meta name="description" content="jQuery实现左右div自适应高度完全相同" /& &meta content="jQuery实现左右div自适应高度完全相同,JavaScript,分享,JavaScript代码" name="keywords" /& &style type="text/css"& &!-- body{FONT-SIZE: 14background-color:#fff} --& &/style& &style type="text/css"& #left{background:#999999; float: width:100} #right{background:#0066FF; color:# width:300 float:} .clear{clear:} &/style& &/head& &body& &h3&右边高度高度左边&/h3& &div id="left"& &div style="padding:10px"& &a href="http://www.jb51.net"&脚本之家&/a& &/div& &/div& &div id="right"& &div style="padding:10px"& 是一个以网站设计相关的资源分享网站，网站只提供最优秀的&a href="http://www.jb51.net/"&JS代码&/a&，jQuery插件,网页特效,HTML5代码，矢量图,设计图标，网站模板等，而且这一切都是免费的 &/div& &/div& &script type="text/javascript" src="/ajax/libs/jquery/1.6.0/jquery.min.js"&&/script& &script type="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& &div style="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 　　ps：介绍摘自百度百科
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
基于jQuery实现左右div自适应高度完全相同的代码
下载积分：30
内容提示：基于jQuery实现左右div自适应高度完全相同的代码
文档格式：PDF|
浏览次数：133|
上传日期： 08:47:47|
文档星级：
该用户还上传了这些文档
基于jQuery实现左右div自适应高度完全相同的代码.PDF
官方公共微信jQuery实现左右div自适应高度完全相同 - 脚本之家
右边高度高度左边
是一个以网站设计相关的资源分享网站，网站只提供最优秀的，jQuery插件,网页特效,HTML5代码，矢量图,设计图标，网站模板等，而且这一切都是免费的jquery实现左右div自适应同等高度-常用代码-Css教程-壹聚教程网jquery实现左右div自适应同等高度有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？
同时，也有网友提问到&如果右块高度比左块低，会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧&。
的确应该是哪个div Height值大，就将其值赋给Height值小的div，从而使2个div高度始终保持一致。看代码：
function $(id){ return document.getElementById(id) } function getHeight() { if ($(&left&).offsetHeight&=$(&right&).offsetHeight){
$(&right&).style.height=$(&left&).offsetHeight + &px&;
$(&left&).style.height=$(&right&).offsetHeight + &px&;
window.onload = function() {
getHeight();
经测试，该代码有效。
另外，在实际运用，可能还会存在由于左div或右div存在padding属性而导致上述取值变多或变少的问题。比如，最终赋值时发现left比right还高10px，那么也可以通过修改上述代码解决：
$(&left&).style.height=$(&right&).offsetHeight-10 + &px&;
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&左右div自适应同等高度&/title&
&& &style type=&text/&&
&& &&#left{background:#999999; float: width:100}
&&#right{background:#0066FF; color:# width:300 float: }
&&.clear{clear:}
&& &/style&
&h3&1. 右边div内容高度高于左边div&/h3&
&div id=&left&&&14万公里收费10万在中国
&div id=&right&&
&ccfsfdsfsdf
&script type=&text/& src=&jquery-1.5.1.min.js&&&/script&
&script type=&text/javascript&&
&&&&&&&& function $(id){&
&&&&&&&&&& return document.getElementById(id)&
&&&&&&& }&
&&&&&&& function getHeight() {&
&&& if ($(&left&).offsetHeight&=$(&right&).offsetHeight){
&&&$(&right&).style.height=$(&left&).offsetHeight + &px&;&&&
&&&$(&left&).style.height=$(&right&).offsetHeight + &px&;&&&
&&& }&&&&&&&&&&&&&&&&&&&&&
&&&&&&& }&
&&&&& window.onload = function() {&
&&&&&&&&& getHeight();&
&&&&&&&& }&
上一页： &&&&&下一页：相关内容投诉建议、广告投放、友情链接，联系QQ：
jquery实现TextArea高度自适应代码
Loading...
本文章来给各位同学介绍各种利用jquery实现TextArea高度自适应效果，有需要的朋友可参考参考。 突然发现，textarea可以显示用户输入原生的元素。用一段js代码控制其高度即可，相关代码如下：
&style type=&text/css&&
.textarea{width:300border:0background:}
模板数据绑定：
&textarea class='textarea'&
&/textarea&
&script type=&text/javascript&&
/** 让textarea 自适应高度 */
$(&.textarea&).each(function(){
&$(this).css(&height&,$(this).attr(&scrollHeight&));
上面这个只是简单做法，下面考虑到兼容性
/// &reference path=&jquery-1.5.1.min.js& /&
$.fn.extend({
&&& textareaAutoHeight: function (options) {
&&&&&&& this._options = {
&&&&&&&&&&& minHeight: 0,
&&&&&&&&&&& maxHeight: 1000
&&&&&&& this.init = function () {
&&&&&&&&&&& for (var p in options) {
&&&&&&&&&&&&&&& this._options[p] = options[p];
&&&&&&&&&&& }
&&&&&&&&&&& if (this._options.minHeight == 0) {
&&&&&&&&&&&&&&& this._options.minHeight=parseFloat($(this).height());
&&&&&&&&&&& }
&&&&&&&&&&& for (var p in this._options) {
&&&&&&&&&&&&&&& if ($(this).attr(p) == null) {
&&&&&&&&&&&&&&&&&&& $(this).attr(p, this._options[p]);
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&&&&&& $(this).keyup(this.resetHeight).change(this.resetHeight)
&&&&&&&&&&& .focus(this.resetHeight);
&&&&&&& this.resetHeight = function () {
&&&&&&&&&&& var _minHeight = parseFloat($(this).attr(&minHeight&));
&&&&&&&&&&& var _maxHeight = parseFloat($(this).attr(&maxHeight&));
&&&&&&&&&&& if (!$.browser.msie) {
&&&&&&&&&&&&&&& $(this).height(0);
&&&&&&&&&&& }
&&&&&&&&&&& var h = parseFloat(this.scrollHeight);
&&&&&&&&&&& h = h & _minHeight ? _minHeight :
&&&&&&&&&&&&&&&&&&&&&&& h & _maxHeight ? _maxHeight :
&&&&&&&&&&& $(this).height(h).scrollTop(h);
&&&&&&&&&&& if (h &= _maxHeight) {
&&&&&&&&&&&&&&& $(this).css(&overflow-y&, &scroll&);
&&&&&&&&&&& }
&&&&&&&&&&& else {
&&&&&&&&&&&&&&& $(this).css(&overflow-y&, &hidden&);
&&&&&&&&&&& }
&&&&&&& this.init();
需要引用jQuery文件，使用方法很简单，比如：
&textarea id=&textarea1&&&/textarea&
&textarea id=&textarea2&&&/textarea&
&textarea id=&textarea3&&&/textarea&
& //最小高度和最大高度默认
& $(&#textarea1&).textareaAutoHeight();
& //最大高度为100px
& $(&#textarea2&).textareaAutoHeight({ maxHeight:100 });
& //最小高度为50px，最大高度为200px
& $(&#textarea3&).textareaAutoHeight({ minHeight:50, maxHeight:200 });
就是在非ie下如果不先将textarea的高度改为0，获取到的scrollHeight就是不正常的，貌似每取一次scrollHeight的值，其scrollHeight值就会修正一点,下面推荐一款插件，这个可以很好解决这个问题。
textarea自适应高度插件 textareaAutoHeightjQuery
功能: &textarea/&输入框自适应高度
特点: 支持剪切/粘贴, 不闪屏, 体积迷你(不到1k)
兼容: 几乎所有主流浏览器(国内山寨货未测试)
演示: 见小站文章页底部的评论输入框
0. 检查CSS文件中所有textarea的line-height值, 若是纯数字, 给它加上单位em, 如: 1.5em. 否则IE(6|7|8)下插件失效.
1. 加载jQuery库(1.4+)
2. 加载textareaAutoHeight.js
3. 使用以下接口调用插件:
$('textarea').tah({
&&& moreSpace:15,&& //输入框底部预留的空白, 默认15, 单位像素
&&& maxHeight:600,& //指定Textarea的最大高度, 默认600, 单位像素
&&& animateDur:200& //调整高度时的动画过渡时间, 默认200, 单位毫秒
正在加载...