jquery $ (window) .height ()는 문서 높이를 반환합니다.


104

내가 만드는 간단한 오류가 있다고 확신하지만 단순히 경고 $(window).height()하고 있으며 $(document).height().

나는 13 "MBA와 내 브라우저의 창 높이를 780px-820px (대략) 사이에서 최대화 할 때마다 문서 높이와 동일한 창 높이를 반환합니다. 작업중인 사이트의 모든 경우에 1000px 이상.

여기서 무슨 일이 일어나고 있습니까?

alert($(window).height());
alert($(document).height()); 

작업중인 브라우저는 무엇입니까?
Kanishka Panamaldeniya

이 문제는 jquery-1.8.0에서 나타나기 시작했습니다. 이전 버전의 jquery가 올바르게 수행했습니다 (DOCTYPE 설정 없이도)
ralhei

답변:


245

doctype태그가 없으면 Chrome은 두 호출에 대해 동일한 값을보고합니다.

다음과 같은 엄격한 문서 유형을 추가 <!DOCTYPE html>하면 값이 광고 된대로 작동합니다.

doctype태그는해야합니다 매우 문서에 제일 먼저. 예를 들어, 아무것도 렌더링하지 않더라도 그 앞에 텍스트가있을 수 없습니다.


11
당신은 <! DOCTYPE HTML>과 같은 엄격한 DOCTYPE 사용하지 않는 파이어 폭스는이보고를하지
톰 Chiverton

또한 잘못된 doctype은 $ (window) .height ()가 문서 높이를 반환하는 것과 같은 이유로 트위터 부트 스트랩 scrollspy를 이상하게 만듭니다.
nidheeshdas

3
제 경우에는 HTML 이전 Response.Write에 출력하던 ASP 사이트에 코드가있었습니다 1. 그래서 내 문서 유형은 맞았지만 기술적으로는 페이지에서 첫 번째가 아니 었습니다.
James

1
나는 같은 문제가 있지만 doctype이 올바르게 선언되었습니다 :(
bia.migueis

1
" doctype 태그는 문서에서 맨 처음에 있어야합니다. 예를 들어, 아무 것도 렌더링하지 않더라도 그 앞에 PHP 코드를 가질 수 없습니다. "어떻게 이럴 수 있습니까? 브라우저는 서버가 실행중인 것을 알지 못하며 HTML 마크 업이있는 텍스트 파일 만받습니다. Apache가 아닌 IIS를 실행하고 있다면 어떨까요? 브라우저는 서버가 무엇을하는지 신경 쓰지 않습니다.
Sablefoste

24

나는 같은 문제가 있었고 이것을 사용하여 해결했습니다.

var w = window.innerWidth;
var h = window.innerHeight;

1
너무 이상해서 적절한 doctype도 사용하고 있습니다. 당신의 내부 높이가 내 문제를 해결했습니다! 감사합니다
마티 반 발굽

1
같은 문제-유효한 doctype과 모두가 있습니다. 약간 더 많은 교차 플랫폼 : var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
melanie johnson

정말로 문제를 고치고 있습니다. (예, 저는 doctype이 있습니다 – 각 페이지에 첫 번째 것)
hillcode

1

문서의 내용을 표시하려면 창에 충분한 공간이 있어야한다고 생각합니다. 즉, 문서의 더 이상 부분을보기 위해 아래로 스크롤 할 필요가 없습니다. 이 경우 문서 높이는 창 높이와 같습니다.


문서는 모든 페이지에서 창 하단 아래로 확장됩니다.
Fraser

0

이에 대한 질문과 답변이 있습니다. screen.availHeight와 window.height ()의 차이점

사진도 있으므로 실제로 차이점을 볼 수 있습니다. 도움이 되었기를 바랍니다.

기본적으로 $(window).height()브라우저 창 (뷰포트) 내부의 최대 높이를 $(document).height()제공하고 브라우저 내부의 문서 높이를 제공합니다. 대부분의 경우 스크롤바를 사용해도 정확히 동일합니다.


0

웹 페이지 jquery (window)에서 Doctype을 사용하면 실제로 작동하며 뷰포트 높이를 반환하고 그렇지 않으면 전체 문서 높이를 반환합니다.

웹 페이지 상단에 다음 태그를 정의하십시오. <!DOCTYPE html>


웹 페이지의 상단에이 태그를 사용 : <DOCTYPE html로!>
Gourav 야다 브
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.