关于浏览器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+测试的第二个图可以看出。
这种分析最耗时间，如果大家觉得不错就别光看不顶了。
如果觉得本文不错，请点击右下方【推荐】！
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.
Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?
Mar 12, 2025 pm 04:05 PM
Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert
