Implement min-height minimum height compatible with IE6, IE7, and FF in css-CSS Tutorial-php.cn

Implement min-height minimum height compatible with IE6, IE7, and FF in css

#mrjin {
    background:#ccc;    min-height:100px;    /*高度最小值设置为：100px*/
    height:auto !important; /*兼容FF,IE7也支持 !important标签*/
    height:100px; /*兼容ie6*/
    overflow:visible;
}

最大宽度...主流浏览器IE对max-width是不支持的，对这一属性的设置在IE中是无效的。同样的对min-width的设置也是无效的。

#commentlist img {
         width: expression(this.width > 500 ? 500: true); 
         max-width: 500px;
}   
#woaicss {
width:100%;  /*FF来说是有效的。而对于IE则没有作用/*
max-width:500px;
width:expression(document.body.clientWidth > 500? "500px": "auto" );
background:#c00;
margin:0 auto;
line-height:30px;
}

/*expression与Javas cript表达式关联起来，对浏览器要求较高1E5以上使用。不建议常用*/

Copy after login

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 webpage height
window.document.body.offsetWidth; Returns the current webpage width
Here we talk about the clientHeight, offsetHeight and offsetHeight of document.body in four browsers Explanation of scrollHeight.

The four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).
clientHeight
No one has any objection to clientHeight. They all think it is the height of the visible area of the content. That is to say, the height of the area where the content can be seen in the page browser, usually from the last toolbar to This area above the status bar has nothing to do with the page content.

offsetHeight
IE and Opera believe that offsetHeight = clientHeight + scroll bar + border.
NS and FF consider offsetHeight to be the actual height of the web page content, which can be smaller than clientHeight.

scrollHeight
IE and Opera consider scrollHeight to be the actual height of the web page content, which can be smaller than clientHeight.
NS and FF consider scrollHeight to be the height of web page content, but the minimum value is clientHeight.

Simply put
clientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that offsetHeight and scrollHeight are both web page content heights, but when the web page content height is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera believe that offsetHeight is the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.

Similarly
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.

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

The difference between clientHeight and offsetHeight

Many articles have introduced clientHeight The difference with offsetHeight is that the value of clientHeight does not include the height of the scrollbar, while the value of offsetHeight includes the height of the scrollbar. However, what exactly do the values of clientHeight and offsetHeight consist of? How to calculate the value of these two numbers?

1. What determines the values of clientHeight and offsetHeight?

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

As shown in the figure above, the value of clientHeight is determined by the actual height of the DIV content and the padding value in CSS, while the value of offsetHeight is determined by the actual height of the DIV content, the padding value in CSS, the height of the scrollbar and the DIV Determined by the border value; as for the margin value in CSS, it will not affect the values of clientHeight and offsetHeight.

2. What impact does the Height value in CSS have on clientHeight and offsetHeight?

First, let’s take a look at what height is defined by Height in CSS. For example, in the "APPENDIX sample code" at the end of this article (note: hereafter referred to as "sample code"), the Height value of innerDIVClass is set to 50px, and the value calculated under IE is as follows. That is to say, in IE, the Height value in CSS defines the height of the DIV including padding (that is, the value of offsetHeight); in Firefox, the Height value in CSS only defines the height of the actual content of the DIV, and padding does not. Included in this value (70 = 50 + 10 * 2).

in IE:

innerDiv.clientHeight: 46 
innerDiv.offsetHeight: 50 
outerDiv.clientHeight: 0 
outerDiv.offsetHeight: 264

Copy after login

in Firfox:

innerDiv.clientHeight: 70 
innerDiv.offsetHeight: 74 
outerDiv.clientHeight: 348 
outerDiv.offsetHeight: 362

Copy after login

In the above example, you may be wondering why in IE The value of outerDiv.clientHeight inside is 0. That's because in the sample code, the Height value of outerDIVClass is not defined. At this time, in IE, the value of clientHeight cannot be calculated. Similarly, in the example code, if the Height value in innerDIVClass is changed to the previous value, the value of innerDIV.clientHeight is also 0. (Note: This does not exist under Firefox).

What if the Height value in CSS is less than the height of the content to be displayed in the DIV (when the overflow behavior is not defined in CSS)? In IE, the entire clientHeight (or offsetHeight) value has no effect, and the DIV will be automatically expanded; while in Firefox, the DIV will not be expanded. For example, in the sample code, the Height value of innerDivClass is set to 0, and the calculation result is as follows. The DIV in IE is stretched, and its clientHeight value is equal to the sum of the height of the content and padding*2; in Firefox, the text will overflow the boundary of the DIV, and its clientHeight value is exactly twice the padding value.

In IE:

innerDiv.clientHeight: 38 
innerDiv.offsetHeight: 42 
outerDiv.clientHeight: 0 
outerDiv.offsetHeight: 256

Copy after login

In Firefox:

innerDiv.clientHeight: 20 
innerDiv.offsetHeight: 24 
outerDiv.clientHeight: 298 
outerDiv.offsetHeight: 312

Copy after login

APPENDIXSample code

<html> 
<head> 
<style type="text/css">...... 
.innerDivClass 
{...}{...}{...}{ 
       color: red; 
       margin: 37px; 
       padding: 10px; 
       border: 2px solid #000000; 
       height: 50px; 


} 
.outerDivClass 
{...}{...}{...}{ 
       padding: 100px; 
       margin: 200px; 
       border: 7px solid #000000; 
} 
</style> 

<script>...... 
function checkClientHeight() 
......{ 
      var innerDiv = document.getElementById("innerDiv"); 
      var outerDiv = document.getElementById("outerDiv"); 

       result.innerHTML = "innerDiv.clientHeight: " + innerDiv.clientHeight + "<br />"; 
       result.innerHTML += "innerDiv.offsetHeight: " + innerDiv.offsetHeight + "<br />"; 
       result.innerHTML += "outerDiv.clientHeight: " + outerDiv.clientHeight + "<br />"; 
       result.innerHTML += "outerDiv.offsetHeight: " + outerDiv.offsetHeight + "<br />"; 
} 
</script> 
</head> 
<body> 
<div id="outerDiv" class="outerDivClass"> 
<div class="innerDivClass" id="innerDiv"> 
Hello world.         
</div> 
</div> 
<p></p> 
<div id="result"> 
</div> 
<input type="button" onclick="checkClientHeight()" text="Click Me" Value="Click Me" /> 
</body> 
</html>

Copy after login

The above is the detailed content of Implement min-height minimum height compatible with IE6, IE7, and FF in css. For more information, please follow other related articles on the PHP Chinese website!