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.