Detailed explanation of the difference between height and min-height in CSS

This article mainly introduces the difference between height and min-height in CSS, and analyzes it from a simple example. Interested friends can refer to it

As a newcomer to the Web front-end, you need to understand the difference between height and min-height

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

* IE6 does not support the CSS min-height property. Definition of minimum height: 1. The element has a default height; 2. When the content exceeds the default height of the element, the height of the element increases as the content increases

Figure 1: The requirements as shown below

* As shown in the picture above, the heights of the two areas are different. This is a demonstration of the effect of min-height. The element has a default height. When the content exceeds the default height, the height of the element increases with the content.

eg1:

##XML/HTML CodeCopy content to clipboard

1. ##<

   style> ##.test{

2. float:left;

3. width:200px;
margin
5. :0 5px;
   padding:10px;

6. border-radius:10px;
#background
8. :#eee;
   }

9. .test{

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

11. }

12. ##
13. style

    >

14. ##<

p

15. class="test">Why is drinking water poisoning? p> <

p

16. class="test">Why is drinking water poisoning? <br> Recently there was a media report that drinking 3 liters of water a day made you 10 years younger, so someone started drinking it, but after 4 days, he urinated blood. . Water is the source of life, but isn’t drinking more water the better? What happens if you drink too much water? p>

17. * As above code, we only need one line of code min-height:80px; to achieve the minimum height of non-IE6 browsers.

CSS Code

Copy content to clipboard

.test{​

1. height

   :
80px
2. ;

   /* Let’s see what happens with ie6 */ }

4. ##Change min-height:80px; to height:80px ; View this style under IE6. You may have discovered a miracle, yes you read that right. The performance of this DEMO is consistent with the performance of the eg1 demo under advanced browsers, that is, the minimum height effect.

But this is not the time to win, because you will find that this example is GameOver in advanced browsers. What should I do? Isn’t this a lie? Don't worry, as a qualified coder, you will definitely think of various ways to solve it.

You are a front-end engineer, so you must know some browser-specific CSS Hacks, although they are not recommended in most cases. Let's find a way to make advanced browsers still use min-height, while ie6 uses height. This seems to be able to achieve the goal, let's do it.

　

Figure 4:Victory scene

CSS Code Copy content to clipboard

1. ##.test{

2. min-height:80px; /* for ie7+, firefox, chrome, safari, opera */

## _height:
3. 80px

   ; /* for ie6 */

}
ok, we Implemented min-height effect including ie6.

Remember, never add a value other than

overflow

except visible, otherwise your ie6 will be a tragic demo again. The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of Detailed explanation of the difference between height and min-height in CSS. For more information, please follow other related articles on the PHP Chinese website!