基于jQuery实现左右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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div
Jan 30, 2023 am 09:23 AM
Méthode CSS pour réaliser qu'il manque un coin à un div : 1. Créez un exemple de fichier HTML et définissez un div ; 2. Définissez la couleur d'arrière-plan de la largeur et de la hauteur du div 3. Ajoutez une pseudo-classe au div qui doit être supprimé ; un coin et définissez la pseudo-classe sur Utiliser la même couleur que la couleur d'arrière-plan, puis faites-la pivoter de 45 degrés, puis positionnez-la sur le coin qui doit être supprimé.
Implémentation d'un script de navigateur de traduction de marquage de mots basé sur l'API ChatGPT
May 01, 2023 pm 03:28 PM
Préface Récemment, il existe un script de navigateur basé sur ChatGPTAPI sur GitHub, openai-translator. En peu de temps, l'étoile a atteint 12k. En plus de prendre en charge la traduction, elle prend également en charge les fonctions de polissage et de synthèse. -ins, il utilise également le packaging tauri. Si vous avez un client de bureau, outre le fait que tauri utilise la partie rust, la partie navigateur est encore relativement simple à implémenter. Aujourd'hui, nous allons l'implémenter manuellement. L'interface fournie par openAI, par exemple, nous pouvons copier le code suivant et lancer une requête dans la console du navigateur pour terminer la traduction //Exemple constOPENAI_API_KEY="s
Quel est le modèle de boîte de division ?
Oct 09, 2023 pm 05:15 PM
Le modèle de boîte div est un modèle utilisé pour la mise en page d'une page Web. Il traite les éléments d'une page Web comme des boîtes rectangulaires. Ce modèle contient quatre parties : la zone de contenu, le remplissage, la bordure et la marge. L'avantage du modèle de boîte div est qu'il peut facilement contrôler la mise en page de la page Web et l'espacement entre les éléments. En ajustant la taille de la zone de contenu, la marge intérieure, la bordure et la marge extérieure, divers effets de mise en page peuvent être obtenus. Le modèle de boîte fournit également certaines propriétés et méthodes permettant de modifier dynamiquement le style et le comportement de la boîte via CSS et JavaScript.
Quelle est la différence entre iframe et div
Aug 28, 2023 am 11:46 AM
La différence entre iframe et div est que iframe est principalement utilisé pour introduire du contenu externe, qui peut charger du contenu provenant d'autres sites Web ou diviser une page Web en plusieurs zones. Chaque zone a son propre contexte de navigation indépendant, tandis que div est principalement utilisé pour diviser et div. organiser le contenu. bloc pour la mise en page et le contrôle du style.
Quelles sont les différences entre div et span ?
Nov 02, 2023 pm 02:29 PM
Les différences sont les suivantes : 1. div est un élément de niveau bloc et span est un élément en ligne ; 2. div occupera automatiquement une ligne, tandis que span ne sera pas automatiquement renvoyé à la ligne ; 3. div est utilisé pour envelopper des structures et des mises en page plus volumineuses ; span est utilisé pour envelopper du texte ou d'autres éléments en ligne ; 4. div peut contenir d'autres éléments de niveau bloc et des éléments en ligne, et span peut contenir d'autres éléments en ligne.
Un moyen simple d'ajouter des éléments div avec jQuery
Feb 19, 2024 pm 09:03 PM
Techniques d'ajout d'éléments jQuerydiv simples et faciles à comprendre jQuery est l'une des bibliothèques JavaScript couramment utilisées dans le développement frontal. Elle fournit des méthodes pratiques pour utiliser les éléments DOM et peut rapidement ajouter, supprimer, modifier et d'autres fonctions d'éléments de page. Lorsque nous utilisons jQuery, nous devons souvent utiliser des éléments div. Ce qui suit présente quelques techniques simples et faciles à comprendre pour ajouter des éléments div et fournit des exemples de code spécifiques. 1. Créez et ajoutez un nouvel élément div
Conseils jQuery : Maîtrisez comment ajouter des balises dans les divs
Feb 23, 2024 pm 01:51 PM
Titre : jQuery Conseils : Maîtriser la méthode d'ajout de balises aux divs En développement web, nous rencontrons souvent des situations où nous devons ajouter dynamiquement des balises à la page. Vous pouvez utiliser jQuery pour manipuler facilement les éléments DOM et obtenir des fonctions d'ajout d'étiquettes rapides. Cet article expliquera comment utiliser jQuery pour ajouter des balises dans les divs et joindra des exemples de code spécifiques. 1. Travail de préparation Avant d'utiliser jQuery, vous devez introduire la bibliothèque jQuery dans la page. Vous pouvez l'introduire via un lien CDN ou la télécharger sur cette page.
Comment afficher deux divs côte à côte
Nov 01, 2023 am 11:36 AM
Les méthodes sont les suivantes : 1. Définissez les deux éléments div sur l'attribut "float:left;" ; 2. Utilisez la disposition flexible de CSS pour afficher facilement les éléments côte à côte ; 3. Utilisez la disposition en grille de CSS pour afficher également les éléments côte à côte ;
