Compatible with IE6, IE7, FF min-height minimum Heights in CSS

Compatible with IE6, IE7, FF min-height minimum Heights in CSS

#mrjin {    background: #ccc;    min-height:100px;    /* Height minimum value set to: 100px*/    height:auto!important;/* compatible FF,IE7 also support!important label */    height:100px;/* Compatible ie6*/    overflow:visible;} Max width ... The main browser IE is not supported for Max-width, the setting of this property is invalid in IE. The same setting for Min-width is invalid. #commentlist img {         width:expression (This.width > 500:true);          max-width:500px;}   #woaicss {width:100%;  /*ff to be effective. And for IE it has no effect/*max-width:500px;width:expression (Document.body.clientWidth > 500?) "500px": "Auto"); background: #c00; margin:0 auto;line-height:30px;} /*expression is associated with the Javas cript expression and is more than 1E5 more demanding for browsers. Not recommended for use */

About ClientHeight, offsetheight, scrollheight

Window.screen.availWidth returns the current screen width (blank space)
Window.screen.availHeight returns the current screen height (blank space)
Window.screen.width returns the current screen width (resolution value)
Window.screen.height returns the current screen height (resolution value)
Window.document.body.offsetHeight; Returns the current page height
Window.document.body.offsetWidth; Returns the current page width
Let's talk about the explanations of the document.body clientheight, offsetheight and ScrollHeight in four browsers.

These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox), respectively.
ClientHeight
Everyone has no objection to the clientheight, are considered to be the height of the content viewable area, that is, the page browser can see the content of the height of the area, is generally the last toolbar below the status bar above the area, not related to the content of the page.

Offsetheight
IE, Opera thinks offsetheight = clientheight + scroll bar + border.
NS, FF think offsetheight is the actual height of the Web content, can be less than clientheight.

ScrollHeight
IE, Opera think ScrollHeight is the actual height of the Web content, can be less than clientheight.
NS, FF thinks that scrollheight is the height of the Web content, but the minimum value is clientheight.

To put it simply
ClientHeight is the height of the area through which the content is viewed by the browser.
NS, FF think Offsetheight and scrollheight are Web content height, but when the content height of the page is less than or equal to ClientHeight, scrollheight value is clientheight, and offsetheight Can be less than clientheight.
IE, Opera thinks offsetheight is the visible area clientheight scroll bar and border. ScrollHeight is the actual height of the Web content.

Similarly
The explanations of clientwidth, offsetwidth and ScrollWidth are the same as above, just change the height to width.

=======================================================================

The difference between clientheight and offsetheight

Many articles have introduced the difference between clientheight and offsetheight, that is, the value of clientheight does not include the height of ScrollBar, and the offsetheight value includes the height of scrollbar. But what exactly does the value of clientheight and offsetheight consist of? How do I calculate the value of these two numbers?

1. What are the values of clientheight and offsetheight determined?

If we have the following DIV, the main text shown is "This is the main body of DIV".

As shown, the value of clientheight is determined by the actual height of the div content and the padding value in the CSS, and the value of offsetheight is determined by the actual height of the div content, the padding value in the CSS, The height of the scrollbar and the border value of the Div are determined; As for the margin values in the CSS, the values of clientheight and offsetheight are not affected.

2. What are the effects of height values in CSS on ClientHeight and offsetheight?

First, let's look at the height of what the height defines in CSS. As in the last section of this article, "Appendix Sample Code" (Note: hereinafter referred to as "Sample Code"), the height value of Innerdivclass is set to 50px, and the values computed under IE are shown below. That is, in IE, the height value in the CSS defines the heights (that is, the offsetheight value) of the div including the padding, and in Firefox, the height value in the CSS defines only the heights of the actual div content, Padding is not included in this value (70 = 50 + 10 * 2).

In IE:

innerdiv.clientheight:46 innerdiv.offsetheight:50 outerdiv.clientheight:0 outerdiv.offsetheight:264

In Firfox:

innerdiv.clientheight:70 innerdiv.offsetheight:74 outerdiv.clientheight:348 outerdiv.offsetheight:362

In the above example, you might be wondering why the value of outerdiv.clientheight in IE is 0. That's because the height value of Outerdivclass is not defined in the sample code, and then in IE, the value of clientheight is not calculated. Similarly, in the sample code, if the height value in Innerdivclass is last year, then the value of Innerdiv.clientheight is also 0. (Note: This is not the case in Firefox).

What if the height value in the CSS is less than what the Div wants to display (when the overflow behavior is not defined in the CSS)? In IE, the entire clientheight (or offsetheight) value does not affect the div will automatically be large, and in Firefox, the DIV will not be open. As in the sample code, the height value of Innerdivclass is set to 0, the result of the calculation is as follows. The div inside IE is open, its clientheight value equals the height of the content and the padding*2, and in Firefox, the text overflows the Div boundary, and its clientheight value is exactly twice times the padding value.

In IE:

innerdiv.clientheight:38 innerdiv.offsetheight:42 outerdiv.clientheight:0 outerdiv.offsetheight:256

In Firefox:

Innerdiv.clientheight:20 innerdiv.offsetheight:24 outerdiv.clientheight:298 outerdiv.offsetheight:312

Appendix Sample Code