jQuery를 기반으로 왼쪽 및 오른쪽 div의 적응형 높이를 구현하는 동일한 코드
- PHP中文网원래의
- 2017-03-30 09:41:391207검색
최근 프론트 엔드 디자인을 할 때 왼쪽과 오른쪽 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) 4가지입니다.
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