好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

关于浏览器window、document、html、body高度的探究_html/css_WEB-I

首先说明本人所理解的这几个元素的计算

  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截图工具取像素对比

                     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;    }             

我是absolute

查看更多关于关于浏览器window、document、html、body高度的探究_html/css_WEB-I的详细内容...

  阅读:34次