jquery는 문서 높이와 창 높이를 가져옵니다.

jquery는 창 높이와 창 높이 $(document).height(), $(window).height()를 가져옵니다

1. $(document).height(): 전체 웹페이지의 문서 높이
2. $(window).height(): 브라우저에 표시되는 창의 높이
3. $(window).scrollTop(): 브라우저의 시각적 창 상단에서 웹 페이지 상단까지의 높이(세로 오프셋)
4. $(document.body).height();//현재 브라우저 창의 문서 본문 높이
5. $(document.body).outerHeight(true);//테두리 여백 여백을 포함한 브라우저 현재 창의 문서 본문 전체 높이
6. $(window).width(); //현재 브라우저 창의 표시 영역 너비
7. $(document).width();//브라우저 현재 창 문서 개체 너비
8. $(document.body).width();//현재 브라우저 창의 문서 본문 높이
9. $(document.body).outerWidth(true);//테두리 여백 여백을 포함한 브라우저 현재 창의 문서 본문 전체 너비

한 문장으로 이해하자면: 웹 페이지의 스크롤바를 가장 아래쪽으로 당겼을 때 $(document).height() == $(window).height() + $(window).scrollTop ().

웹페이지 높이가 브라우저 창보다 작으면 $(document).height()는 $(window).height()를 반환합니다.

$("html").height() 및 $("body").height()와 같은 높이는 사용하지 않는 것이 좋습니다.

이유:

$("body").height(): 본문에 테두리가 있을 수 있으며, 획득된 높이는 $(document).height()보다 작습니다.

$("html").height(): 브라우저마다 얻은 높이의 의미가 다릅니다. 직설적으로 말하면 브라우저는 호환되지 않습니다.

$(window).height() 값에 문제가 있습니다. 반환되는 내용은 브라우저 창의 높이가 아닌가요?

이유: 웹페이지에 문이 포함되어 있지 않습니다.

js는 페이지 높이와 창 높이를 가져옵니다

실용적 적용: 콘텐츠 영역의 적절한 높이 설정

//设置内容区域合适高度
  var docH = $(document).height(),
    winH = $(window).height(),
    headerH = $(".header").outerHeight();
    footerH = $(".footer").outerHeight();
  if(docH<=winH+4){
    $("div.container").height(winH-headerH-footerH-50);
  }