Differences and connections between $(document).height(), $('body').height(), $(window).height()

Foreword: Here we take height as an example, and the width issue can be analogized. In mobile development, we often encounter situations where a piece of content needs to be positioned at the bottom. When the page content is less than one screen, it needs to be set to fixed. When it exceeds one screen, it needs to be set to static and the page will be pushed to the bottom. At this time You need to determine whether the content exceeds the screen by judging the size of $(document).height() and $(window).height().

$(document): Entire document
$("body")：body
$(window): Viewport (provided doctype is set)

1) When the page content is larger than the viewport (browser window): $(document).height() = $("body").height() > $(window).height();

2) When the page content is smaller than the viewport: $(document).height() = $(window).height() > $("body").height();

In addition: $(window).height() is also affected by the DOCTYPE of the page header, and the default is the premise of DOCTYPE.