CSS Topic (iii): Page height micro

Background

This article does not discuss the size and position of common elements, but only the page size and position. to simplify the problem, this article only discusses the distance between height and top. The author found that the page width and height are different, and careful friends will find that, so the page width is discussed in another article, the article has been written, see the page width micro.

The page height here refers to the height of the browser page. There are four elements that can represent the height of a page: window, html, document, body. The height and width of these elements are often used but are not noticed. For example, the center of the pop-up layer, the drag range of the drag layer, and the page layout cannot be separated from the height and width of the page. Among the above four elements or objects, window is the most special and belongs to the BOM series in javascript, while html, document, and body belong to the DOM series in javascript. We will discuss it separately below.

2. What heights do we care about?

　　In my opinion, there are only three commonly used page heights. It is not easy to determine these three heights. The purpose of this article is to describe and summarize the three achievements. The three values are:

1. The window height is the height of the content displayed in the browser window that we can see at a glance, which changes with the browser scaling.

2. the document height is determined by the actual content of the html page. It changes without the browser window scaling, including the invisible scroll bar. If the browser content area is blank, the height of White Paper is the document height.

3. when a vertical scroll bar appears and a part of the page is pulled down, the top of the page will hide some heights because of the scroll bar. This value is of great significance in Adaptive Layout, it is also called the height to be rolled up.

The above three values may be of great interest to us. They have value in front-end technologies, such as layout, positioning, adaptive, drag, and pop-up layers. Due to browser differences, their value methods vary with different standards, it is often painful. After jQuery was launched, it was called a unified system. After careful research, I found that jQuery did not completely unify these three values.

Three windows

　　What is window? Window is the window, which was created before the DOM tree was generated. It can be said that it was born in the browser, even if there was no confusion between the concepts of js, html, document, body, etc, window still exists, just like a normal win32 program window. The width and height of this win32 program are very understandable, that is, we can see width and height. In the browser, the window object refers to the page window. Therefore, the window object can only use these two attributes for positioning the size. These two attributes will always reflect the height and width of the page window. The native window does not have the width and height attributes, but there are a bunch of messy attributes. Why should we arrange them. Therefore, we recommend that you use the height () and width () Methods of jQuery's $ (window) method. This method faithfully reflects the size of the page window and can change as the browser scales.

The height of the window is shown as well as functions such as scrollTop (). These methods should not belong to the window object, so jquery does this for encapsulation. JQuery is doing well here, $ (window ). the value of scrollTop () actually reflects the "rolled up height" described above. What's worth noting is that the performance of all IE6 to chrome browsers is consistent.

In this way, we achieved the best in the first round and mastered the method of getting two values in three heights. In summary:

1. window height, $ (window). height ()

2. rolled up height, $ (window). scrollTop ()

Don't underestimate this result. It is also the result that we have come up. Later, we will find that the following values can also reflect the window height:

1.clientheightof document.documentelementunder firefox(document.doc umentElement is the html element)

2.chrome's clientHeight of document.doc umentElement,

3. clientHeight of document.doc umentElement under IE 7 8 9,

4. clientHeight of document. body under IE6,

As you can see, there is an IE6 mess in Datong No. 1, so the values of $ (window). height () are more unified.

The following values can also reflect the height of a roll-up, which is many and messy. the following values can also reflect the height of a roll-up:

1.firefox's contents (document.doc umentElement). scrollTop (),

2. $ (document). scrollTop () in Firefox (),

3.document.doc umentElement. scrollTop under firefox,

4. $ (document). scrollTop () in Chrome (),

5. $ (document. body). scrollTop () in Chrome (),

6. document. body. scrollTop in Chrome,

7. $ (document). scrollTop () under IE6 (),

8. $ (document. body). scrollTop () under IE6 (),

9. document. body. scrollTop under IE6,

Certificate (document.doc umentElement). scrollTop () under 10.ie7 (),

11. $ (document). scrollTop () under IE7 (),

Document.doc umentElement. scrollTop under 12.ie7,

13.ie8's contents (document.doc umentElement). scrollTop (),

14. $ (document). scrollTop () under IE8 (),

Document.doc umentelement. scrolltop under 15.ie8,

It can be seen that except $ (window ). scrolltop () can actually reflect the height of rolled up, and can also be, that is, $ (document ). scrolltop (), but there is no uniform value in the native scrolltop value. We recommend that you use the value $ (window). scrolltop () to facilitate memory. $ (Document). scrolltop () is easy to understand, because it is generated because the document cannot be stored in the window after all.

 

Iv. html
All browsers support document. To be clear about the past and future generations of document, we should start with the document. An HTML page is essentially a tree. The root node is document. Document and Dom
The htmlelement object specified in js also has the attribute of expressing height and offset. All htmlelement elements have the following attributes:

Offsetheight: the height of the element;

Offsettop: the distance from the upper border of the element to the upper border of the parent element;

Clientheight: the height of the customer area of the element, that is, offsetheight minus the border value;

Scrollheight: When an element has a vertical scroll bar, the height of the element, that is, the actual height of the content.

Scrolltop: The Hidden distance at the top of a scroll bar in the vertical direction.

Do not be surprised when the first htmlelementelement is named document.doc umentelement. Let's take a look at the basic structure of the HTML page:

<HTML>

<Head>

<Body> </body>
</Html>

From this we can see that

 

5. Document

　　The document height is encapsulated by jQuery. It should be because the document itself is not an HtmlElement object, but the encapsulated value is very accurate and completely consistent in various browsers. Therefore, the value of $ (document). height () is very reliable and can reflect the "document height" mentioned above. Therefore, we find another value, that is

1. document height, $ (document). height ()

 

Six bodies

　　The height and width of the body are often used as the representative of the page height. However, after careful research, I found that some of the height values reflected by the body are unsatisfactory in various browsers. The three target values mentioned earlier in this article have been obtained. Besides, the body does not matter, however, the height-related value of the body is not required.

How is the value of body. offsetheight calculated? The value is smaller than the value of document.doc umentelement. offsetheight. Why? The value of body.offsetheightwill never exceed document.doc umentelement. offsetheight. We know that the HTML element represents the document height and is supported. The height of the body is not calculated in this way. The height of the body is actually the height occupied by the document. The subtle difference between the two lies in: the latter ignores the margin-top of the top block element and the margin-bottom of the bottom block element. This conclusion conforms to the original meaning of offsetheight. It has been stated in the size and position of the element above. offsetheight expresses the height occupied by the element, including padding, height, border, etc, while margin is a positioning concept, it has nothing to do with the height occupied by elements.

If it is a common element, we will care about the height occupied by the element offsetheight, but the value expressed by the offsetheight attribute of the body is generally not what we want.

VII. Summary

To sum up, the three page heights we care about have a value method, which is summarized:

 

1. window height, $ (window). Height ()

2. Document height, $ (document). Height ()

 

3. rolled up height, $ (window). scrolltop ()

Eight examples

So the example of this article in: http://www.zangb.com/html/demo/css/css_pageHeight.html

Fang Jinsong, Nanjing focus technology, is written on in Qingliangshan, Gulou