栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

基于jQuery实现左右div自适应高度完全相同的代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

基于jQuery实现左右div自适应高度完全相同的代码

在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm
完整代码:
复制代码 代码如下:




jQuery实现左右div自适应高度完全相同 - 考高分网







#left{background:#999999; float:left; width:100px;}
#right{background:#0066FF; color:#fff; width:300px; float:left;}
.clear{clear:both;}



右边高度高度左边


考高分网




是一个以网站设计相关的资源分享网站,网站只提供最优秀的JS代码,jQuery插件,网页特效,HTML5代码,矢量图,设计图标,网站模板等,而且这一切都是免费的








这其中的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:介绍摘自百度百科
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/112809.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号