首页 web前端 js教程 基于jQuery实现左右div自适应高度完全相同的代码

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

Mar 30, 2017 am 09:41 AM
div

最近做前端设计时需要使左右两个p高度自适应。这其中的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/html; charset=utf-8" /> 
<title>jQuery实现左右p自适应高度完全相同 - 脚本之家</title> 
<meta name="Copyright" content="脚本分享网 http://www.jb51.net/" /> 
<meta name="description" content="jQuery实现左右p自适应高度完全相同" /> 
<meta content="jQuery实现左右p自适应高度完全相同,JavaScript,分享,JavaScript代码" name="keywords" /> 
<style type="text/css"> 
<!-- 
body{FONT-SIZE: 14px;background-color:#fff} 
--> 
</style> 
<style type="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> 
<p id="left"> 
<p style="padding:10px"> 
<a href="http://www.php.cn/xiazai/js">php中文网特效下载站</a> 
</p> 
</p> 
<p id="right"> 
<p style="padding:10px">
是一个以网站设计相关的资源分享网站,网站只提供最优秀的<a href="http://www.php.cn/xiazai/js">JS代码</a>,jQuery插件,网页特效,HTML5代码,矢量图,设计图标,网站模板等,而且这一切都是免费的 
</div> 
</div> 
<script type="text/javascript" src="https://ajax.googleapis.com/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> 
<p style="clear:both"></p> 
</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


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

css怎么实现div缺一个角 css怎么实现div缺一个角 Jan 30, 2023 am 09:23 AM

css实现div缺一个角的方法:1、创建一个HTML示例文件,并定义一个div;2、给div设置宽高背景色;3、给需要删除一角的div增加一个伪类,将伪类设置成跟背景色一样的颜色,然后旋转45度,再定位到需要去除的那个角即可。

基于 ChatGPT API 的划词翻译浏览器脚本实现 基于 ChatGPT API 的划词翻译浏览器脚本实现 May 01, 2023 pm 03:28 PM

前言最近GitHub上有个基于ChatGPTAPI的浏览器脚本,openai-translator,短时间内star冲到了12k,功能上除了支持翻译外,还支持润色和总结功能,除了浏览器插件外,还使用了tauri打包了一个桌面客户端,那抛开tauri是使用rust部分,那浏览器部分实现还是比较简单的,今天我们就来手动实现一下。openAI提供的接口比如我们可以复制以下代码,在浏览器控制台中发起请求,就可以完成翻译//示例constOPENAI_API_KEY="s

div与span的区别有哪些 div与span的区别有哪些 Nov 02, 2023 pm 02:29 PM

区别有:1、div是一个块级元素,span是一个行内元素;2、div会自动占据一行,span则不会自动换行;3、div用于包裹比较大的结构和布局,span用于包裹文本或者其他行内元素;4、div可以包含其他块级元素和行内元素,span可以包含其他行内元素。

iframe和div有什么不同 iframe和div有什么不同 Aug 28, 2023 am 11:46 AM

iframe和div的不同是iframe主要用于引入外部内容,可以加载其他网站的内容或将一个网页分割成多个区域,每个区域有自己的独立的浏览上下文,而div主要用于分割和组织内容的区块,用于布局和样式控制。

div盒模型是什么 div盒模型是什么 Oct 09, 2023 pm 05:15 PM

div盒模型是一种用于网页布局的模型,它将网页中的元素视为一个个矩形的盒子,这个模型包含了四个部分:内容区域、内边距、边框和外边距。div盒模型的好处是可以方便地控制网页布局和元素之间的间距,通过调整内容区域、内边距、边框和外边距的大小,可以实现各种不同的布局效果,盒模型也提供了一些属性和方法,可以通过CSS和JavaScript来动态地改变盒子的样式和行为。

如何将两个div并排显示 如何将两个div并排显示 Nov 01, 2023 am 11:36 AM

方法有:1、将两个div元素设置为“float:left;”属性;2、使用CSS的flex布局可以轻松实现元素的并排显示;3、使用CSS的grid布局也可以实现元素的并排显示。

css div内容超出隐藏怎么实现 css div内容超出隐藏怎么实现 Jan 28, 2023 pm 03:12 PM

css div内容超出隐藏的实现方法:1、通过css代码“overflow: hidden;”实现内容超出隐藏;2、通过js代码“var myBox = document.getElementById('demo');var mydemoHtml = myBox.innerHTML.slice(0, 20) +'......';”实现内容超出隐藏即可。

如何在css中让div居中 如何在css中让div居中 Oct 12, 2023 am 10:07 AM

在css中让div居中的方法有使用margin属性、flexbox布局、绝对定位和使用grid布局等。详细介绍:1、使用margin属性,最简单的方法是使用margin属性,通过设置左右margin为auto,可以将div水平居中;2、使用flexbox布局,Flexbox是CSS3中引入的一种弹性盒子布局模型,可以方便地实现元素的居中;3、使用绝对定位,通过使用绝对定位等等。

See all articles