Shulou(Shulou.com)06/03 Report--

This article will explain in detail what is the difference between height and min-height in the front end of Web. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Browser reference: Firefox, Chrome, Safari, Opera, IE;

* the CSS min-height attribute is not supported by IE6. Definition of minimum height: 1. The element has the default height; 2. When the content exceeds the default height of the element, the height of the element increases with the increase of the content. Figure 1: the requirements of the following figure

* as shown in the figure above, the heights of the two areas are different. This is the demonstration of the effect of min-height. The element has a default height, and when the content exceeds that default height, the height of the element increases with the content.

Eg1: .test {float:left; width:200px; margin:0 5px; padding:10px; border-radius:10px; background:#eee;} .test {min-height:80px; / * minimum height code * /} Why is it poisoned to drink water? Why can drinking water be poisoned?

A few days ago, some media reported that drinking 3 liters of water a day was 10 years younger, so someone really started drinking, but after 4 days, he urinated blood. Water is the source of life, but isn't it better to drink as much as possible? What happens if you drink too much water?

* as in the above code, we only need one line of code min-height:80px; to achieve the minimum height of a non-IE6 browser.

.test {height:80px; / * see what happens to ie6 * /}

* change min-height:80px; to height:80px; and view this style under IE6. You may have found a miracle. Yes, you read it right. The performance of this DEMO is consistent with that of eg1's demo in advanced browsers, that is, the effect of minimum height.

* but this is not the time to win completely, because you will find that this example is GameOver in advanced browsers. What are we going to do? isn't this a joke? Don't worry, as a qualified coder, you will certainly find all kinds of ways to deal with it.

* you are a front-end engineer, so you must know some browser-specific CSS Hack, although it is not recommended in most cases. Let's figure out a way to get advanced browsers to still use min-height and ie6 to use height, so that seems to work. Let's do it.

Figure 4: the winning scenario. Test {min-height:80px; / * for ie7+, firefox, chrome, safari, opera * / _ height:80px; / * for ie6 * /}

* ok, we have implemented the min-height effect including ie6.

* remember, do not add a value of overflow other than visible, or your ie6 will be tragic demo.

This is the end of the article on "what's the difference between height and min-height in the front end of Web". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.