$(document).height()、$("body").height()、$(window).height()区别和联系
程序员文章站
2022-05-17 21:44:37
...
前言:在此以高度为示例,宽度问题可类推。在移动端开发中,经常遇到需要把一块内容定位于底部的情况,当页面内容不满一屏时,需要设为fixed,而超过 一屏时,需要设为static随页面顶到底部,此时就需要通过判断$(document).height()和$(window).height()的大 小来区分内容是否超屏。
$(document):整个文档
$("body"):body
$(window):视口(有设doctype的前提下)
1)、页面内容大于视口(浏览器窗口)时:$(document).height() = $("body").height() > $(window).height();
2)、页面内容小于视口时:$(document).height() = $(window).height() > $("body").height();
另:$(window).height()还受页头DOCTYPE的影响,在此默认为有DOCTYPE的前提。
$(document):整个文档
$("body"):body
$(window):视口(有设doctype的前提下)
1)、页面内容大于视口(浏览器窗口)时:$(document).height() = $("body").height() > $(window).height();
2)、页面内容小于视口时:$(document).height() = $(window).height() > $("body").height();
另:$(window).height()还受页头DOCTYPE的影响,在此默认为有DOCTYPE的前提。
推荐阅读
-
H5 canvas中width、height和style的宽高区别详解
-
关于height:100%和height:100vh的区别了解吗,进来看看
-
$(document).height()、$("body").height()、$(window).height()区别和联系
-
$(document).height()、$("body").height()、$(window).height()区别和联系
-
line-height:150%和line-height:1.5的区别_html/css_WEB-ITnose
-
line-height:150%和line-height:1.5的区别_html/css_WEB-ITnose
-
CSS中height和min-height的区别详解
-
CSS中line-height和height的区别
-
height/width、offsetheight/offsetwidth、clientheight/clientwidth和scrollheight/scrollwidth的区别
-
CSS之height: 100%和height: auto的区别