关于浏览器window、document、html、body高度的探究_html/css_WEB-ITnose
首先说明本人所理解的这几个元素的计算
window高度应当是文档所在窗口的可视高度（没有包括浏览器的滚动条），计算方法document.documentElement.clientHeight
document高度应该为文档内容的高度，计算方法Math.max(document.body[ "scrollHeight" ], document.documentElement[ "scrollHeight"])
html高度应当为html元素的高度（包括边框滚动条）,计算方法htmlElement.offsetHeight
body高度是body元素的高度（包括边框滚动条），计算方法bodyElements.offsetHeight;
以上测试方式和jQuery的处理相同。直接使用jQuery来测试。
用例：
注意：里面的#absolute是脱离文档流的元素。
测试必要条件：
1.所有测试都在没有设定margin/padding为整数的情况下测定。
2.其中细节高度笔者使用QQ截图工具取像素对比
<!DOCTYPE html><html lang="ch-cn"> <head> <meta charset="utf-8"> <script type="text/javascript" src='jquery-1.9.1.js'></script> <style type="text/css"> html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; } #absolute{ position: absolute; margin-left: 300px; height: 500px; width: 500px; background: #ff0; } #normal{ height: 300px; width: 300px; background: #f00; } </style> </head> <body> <div id='absolute' >我是absolute</div> <div id="normal">我是normal</div> <script type="text/javascript"> function show(){ console.log("window height " + $(window).height()); console.log("document height " + $(document).height()); console.log("html height " + $("html").height()); console.log("body height " + $("body").height()); } </script> </body> </html>显示效果为
第一组测试：IE8
IE8总结:
window可视窗口高度，不包括浏览器滚动条（IE后面两个图对比可得，第二个IE下面有个滚动条占6px）。IE有一个特点：window高度与真正的可视窗口相比会少4px（第三个IE图片可知，这个时候document的高度和可视窗口高度相同），说明IE的window四边有2px的间隙，也就是IE自己的offset值。
document文档高度，完全显示所有文档内容的高度(非iframe内【包括脱离文档流的元素显示】，第一个IE图可得)和IE工作区（看html解释）取最大值（这个高度最终决定窗口滚动条能滚动显示到哪里）
html高度是窗口的高度，这个窗口是IE自己划定的浏览器工作区域高度，包括可视窗口、2px的offset、浏览器滚动条等等，看下面的效果图
body高度是内容真实高度（脱离文档流定位的不再里面，三个图可以为此作证）
第二组测试：IE9+
IE9+总结：
window高度是可视窗口高度，不包括浏览器滚动条。
document文档高度，完全显示所有文档内容的高度(非iframe内【包括脱离文档流的元素显示】，第一个IE图可得)和IE工作区（看html解释）取最大值（这个高度最终决定窗口滚动条能滚动显示到哪里）
html高度是窗口的高度，这个窗口是IE自己划定的浏览器工作区域高度，包括可视窗口、浏览器滚动条，比IE8要标准一些（没有offset了，滚动条和工作区边也没有了间隙，看下图）
body高度内容真实高度（脱离文档流定位的不再里面）
第二组测试：chrome
chrome总结：
window高度是可视窗口高度，不包括浏览器滚动条。
document高度是完全显示所有文档内容的高度(非iframe内【包括脱离文档流的元素显示】，第一个chrome图可得)和可视窗口高度取最大值（这个高度最终决定窗口滚动条能滚动显示到哪里）
html高度和body内容高度相同
body高度内容真实高度（脱离文档流定位的不再里面）
第三组测试：Firefox
Firefox总结：
window高度是可视窗口高度，不包括浏览器滚动条。
document高度是完全显示所有文档内容的高度(非iframe内【包括脱离文档流的元素显示】，第一个Firefox图可得)和可视窗口高度取最大值（这个高度最终决定窗口滚动条能滚动显示到哪里）
html高度和body内容高度相同
body高度内容真实高度（脱离文档流定位的不再里面）
好了，总结一下：
window高度是可视窗口高度，不包括浏览器滚动条高度。比较特别的是IE8的可视窗口边上有2px的offset，所以IE8的可视窗口高度会比我们看到的窗口要小4px。
document高度是完整文档高度，这个高度计算根据浏览器不同而不同：标准浏览器document高度 = max(文档真实完整高度【包括脱离文档流的元素的显示】,可视窗口高度）；IE浏览器document高度 = max(文档真实完整高度【包括脱离文档流的元素的显示】,IE工作区高度)
html高度根两种：标准浏览器html高度=body内容高度；IE浏览器html高度 = IE工作区高度（具体查看IE的分析）；
body高度是内容真实高度（脱离文档流定位的不再里面）。
对比总结中可以看出，IE和标准浏览器区别最大的是document和html的计算方法。有一点要说明的是，IE的documen高度因为可能是IE工作区高度，那么可能会包括滚动条，如IE9+测试的第二个图可以看出。
这种分析最耗时间，如果大家觉得不错就别光看不顶了。
如果觉得本文不错，请点击右下方【推荐】！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
