The difference between height and min-height in CSS

This article mainly for you in detail the CSS in the height and the difference between the min-height, from a simple example for everyone to analyze, interested in small partners can refer to

As a new web front-end, you need to know the difference between height and min-height

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

* IE6 does not support CSS Min-height properties. Definition of minimum height: 1. The element has a default height; 2. When content exceeds the default height of an element, the height of the element increases with the content increasing

Figure 1: Requirements for

* For example, the height of two regions is different. This is the Min-height effect demonstration. Element has a default height, and when content exceeds that default height, the height of the element increases with the content.

EG1:

xml/html Code copy content to clipboard

2. < style >

4. . test{

6. Float:left;

8. width:200px;

10. margin:0 5px;

12. padding:10px;

14. border-radius:10px;

16. Background: #eee;

18. }

20. . test{

22. min-height:80px; /* Implement minimum height code */

24. }

26. </ style >

30. < P class="Test"> Why is water poisoning? </ P >

32. < P class="Test"> Why is water poisoning? < BR > recently reported that the day drinking 3 liters of water young 10 years old, so someone really began to drink, can drink 4 days later, urine. Water is the source of life, but is not the more water the better? What happens when you drink more water? </ P >

* As above code, we only need one line of code min-height:80px; The minimum height of the non-IE6 browser can be achieved.

CSS Code copy content to clipboard

1. . test{

2. height:80px; / * See how IE6 will be * /

3. }

Will min-height:80px; Change into height:80px; Look at this style under IE6. You may have found a miracle, yes, you read it right. The demo's performance is consistent with the EG1 demo in the Advanced Browser, which is the minimum height effect.

But this is not the time to win, because you will find this example in the Advanced browser is Gameover. Is this not a pit daddy? Don't worry, as a qualified coder, you will definitely think of ways to fix it.

You are a front-end engineer, so you have to know some browser-specific CSS Hack, although most of the cases are not recommended. We try to make the advanced browser still use Min-height, and IE6 use height, it seems to be able to achieve the goal, do it.

　

Figure 4: a triumphant scene

CSS Code copy content to clipboard

1. . test{

2. min-height:80px; / * For ie7+, Firefox, Chrome, Safari, Opera * /

3. _height:80px; / * for IE6 * /

4. }

OK, we implemented the Min-height effect including IE6.

Remember, do not add overflow other than the visible value, or your IE6 will also be a tragic demo.