Compatible with the browser's min-height and min-width

The min-height and min-width container attributes are familiar to everyone.

Let's talk about min-height first. This looks easy.

Take a look at the interview example:

<Div style = "border: 5px solid # f00; min-height: 200px; width: 300px; padding: 12px;"> Minimum height </div>

The running diagram is as follows:

Don't be so happy too early. Don't forget that ie6.0, which has already put you in deep sorrow, has to respond to you like this:

 

There is no way. Who has no money in the pockets of rich and poor Chinese people? Maybe not. It should be said that who made us selfless Chinese people and paid their pockets to the country?

We cannot upgrade IE. Hard-earned Chinese !!!

Too far ........

The problem is always solved! The poor have the active law of the poor.

The brain suddenly experienced a phenomenon!

Code:

<Div style = "border: 5px solid # f00; height: 120px; width: 300px; padding: 12px; "> minimum height, minimum height, and minimum height minimum height minimum height </div>

When a height is given to the container, the standard browser does this. If overflow is not set, the content will exceed but the height of the container will not change! At this time, we go back to the front. If we want to adapt to the height, of course, we will remove the height attribute. Sometimes we need a minimum height to occupy a certain amount of space. This leads to the min-height attribute. However, ie6.0 does not support this function !!

However, the test results of the same Code in ie6.0 are as follows:

This is really surprising !! In IE6, when the content exceeds the height, the height becomes invalid !! Isn't this exactly what Min-height is trying to achieve?

Therefore, we have to use the hack (_ Height: 120px) technology for ie6.0. Here I say "I have to" it is because I hate to use hack. I have a taste of myself. My principle is that we do not need to use hack as much as possible.

The Code is as follows:

<Div style = "border: 5px solid # f00; Min-Height: 120px; _ Height: 120px; width: 300px; padding: 12px;"> Minimum height </div>

Tested and expected.

 

The road is finally halfway through. Obviously, we are not satisfied with this, so we can get more from an unsatisfied heart! Never get greedy on the technical road !!

We want Min-width to achieve this effect.

First test:

<Div style = "border: 5px solid # f00; Min-width: 120px; padding: 12px;"> minimum width </div>

However, we were surprised by the results, and all the browsers failed:

What's going on? Test, all go on strike !! After careful consideration, it wasn't the same thing. The container height is determined by the content size by default, but the width is not! By default, the width of the parent container is inherited. Of course, the premise is that the display is a block.

Oh, it turns out that this is the case. We have to make the default width of the container determined by the content.

I think of the following situations:

1 display: inline. However, the problem is that the width will be invalid, and the tested min-width will also be invalid. In this case, the screen will be dropped !!;

2. So we thought of the display: inline-block attribute. Well, there should be no problem !? Get started

The Code is as follows:

<Div style = "border: 5px solid # f00; display: inline-block; min-width: 220px; padding: 12px;"> minimum width </div>

According to tests, firefox, chrome, and ie8.0 are all valid.

The Internet Explorer 6 cannot be used !! In addition, ie7 won't work either. Don't, take a closer look. In the past, ie6 and ie7 didn't implement display: inline-block;
Modify the Code:

<Div style = "border: 5px solid # f00; display: inline-block; * display: inline; zoom: 1; min-width: 220px; padding: 12px; "> minimum width </div>

Try ie7 first. OK! Try ie6 again. It's still "evil "!! Don't worry. At least we understand the usage of min-width. It takes effect only when the width is determined by the content. Try adding more content. Is the container larger if we want to exceed the content we want?

Well, it is. But there is a small problem, that is, when the content exceeds the browser width, it will still wrap. Ignore it! Solve the Problem of ie6.0 first.

After careful consideration, now I am back to the original idea. Only i6 has a problem. How was it solved? Oh, ie6.0's height itself has the min-height feature. So does width? Let's add _ width: 220px.

<Div style = "border: 5px solid # f00; display: inline-block; * display: inline; zoom: 1; min-width: 220px; _ width: 220px; padding: 12px; "> Minimum Width minimum width </div>

 

The results were very serious and we were very disappointed. Our only idea is also broken down! ? ?..... "Line feed !!?? "Then I will let you not wrap it !!!

<Div style = "border: 5px solid # f00; display: inline-block; * display: inline; zoom: 1; min-width: 220px; _ width: 220px; padding: 12px; white-space: nowrap "> Minimum Width minimum width </div>

 

It's okay! Add some content !!!

Even above, the problem of exceeding the browser width is also solved! Try other browsers. Ie7, ie8, firefox, and chrome all pass. Other gains!

3 position: absolute. well, this looks good.

<Div style = "border: 5px solid # f00; position: absolute; min-width: 220px; _ width: 220px; padding: 12px; white-space: nowrap "> minimum width </div>

 

Add some content:

 

Yes, as expected.

 

4 float: left is the most common case. It should also work!

Code:

<Div style = "border: 5px solid # f00; float: left; min-width: 220px; _ width: 220px; padding: 12px; white-space: nowrap "> minimum width </div>

 

Add the following content:

Expected!

I can think of these situations. Of course, there is something in the analysis that is not in place. Please leave it blank. Some browsers do not have a test. If not, try again.

The min-height and min-width container attributes are familiar to everyone.

Let's talk about min-height first. This looks easy.

Take a look at the interview example:

<Div style = "border: 5px solid # f00; min-height: 200px; width: 300px; padding: 12px;"> Minimum height </div>

The running diagram is as follows:

Don't be so happy too early. Don't forget that ie6.0, which has already put you in deep sorrow, has to respond to you like this:

 

There is no way. Who has no money in the pockets of rich and poor Chinese people? Maybe not. It should be said that who made us selfless Chinese people and paid their pockets to the country?

We cannot upgrade IE. Hard-earned Chinese !!!

Too far ........

The problem is always solved! The poor have the active law of the poor.

The brain suddenly experienced a phenomenon!

Code:

<Div style = "border: 5px solid # f00; height: 120px; width: 300px; padding: 12px; "> minimum height, minimum height, and minimum height minimum height minimum height </div>

When a height is given to the container, the standard browser does this. If overflow is not set, the content will exceed but the height of the container will not change! At this time, we go back to the front. If we want to adapt to the height, of course, we will remove the height attribute. Sometimes we need a minimum height to occupy a certain amount of space. This leads to the min-height attribute. However, ie6.0 does not support this function !!

However, the test results of the same Code in ie6.0 are as follows:

This is really surprising !! In ie6, when the content exceeds the height, the height becomes invalid !! Isn't this exactly what min-height is trying to achieve?

Therefore, we have to use the hack (_ height: 120px) technology for ie6.0. Here I say "I have to" it is because I hate to use hack. I have a taste of myself. My principle is that we do not need to use hack as much as possible.

The Code is as follows:

<Div style = "border: 5px solid # f00; min-height: 120px; _ height: 120px; width: 300px; padding: 12px;"> Minimum height </div>

Tested and expected.

 

The road is finally halfway through. Obviously, we are not satisfied with this, so we can get more from an unsatisfied heart! Never get greedy on the technical road !!

We want min-width to achieve this effect.

First test:

<Div style = "border: 5px solid # f00; Min-width: 120px; padding: 12px;"> minimum width </div>

However, we were surprised by the results, and all the browsers failed:

What's going on? Test, all go on strike !! After careful consideration, it wasn't the same thing. The container height is determined by the content size by default, but the width is not! By default, the width of the parent container is inherited. Of course, the premise is that the display is a block.

Oh, it turns out that this is the case. We have to make the default width of the container determined by the content.

I think of the following situations:

1 display: inline. However, the problem is that the width will be invalid, and the tested Min-width will also be invalid. In this case, the screen will be dropped !!;

2. So we thought of the display: inline-block attribute. Well, there should be no problem !? Get started

The Code is as follows:

<Div style = "border: 5px solid # f00; display: inline-block; Min-width: 220px; padding: 12px;"> minimum width </div>

According to tests, Firefox, chrome, and ie8.0 are all valid.

The Internet Explorer 6 cannot be used !! In addition, IE7 won't work either. Don't, take a closer look. In the past, IE6 and IE7 didn't implement display: inline-block;
Modify the Code:

<Div style = "border: 5px solid # f00; display: inline-block; * display: inline; ZOOM: 1; Min-width: 220px; padding: 12px; "> minimum width </div>

Try ie7 first. OK! Try ie6 again. It's still "evil "!! Don't worry. At least we understand the usage of min-width. It takes effect only when the width is determined by the content. Try adding more content. Is the container larger if we want to exceed the content we want?

Well, it is. But there is a small problem, that is, when the content exceeds the browser width, it will still wrap. Ignore it! Solve the Problem of ie6.0 first.

After careful consideration, now I am back to the original idea. Only i6 has a problem. How was it solved? Oh, ie6.0's height itself has the min-height feature. So does width? Let's add _ width: 220px.

<Div style = "border: 5px solid # f00; display: inline-block; * display: inline; zoom: 1; min-width: 220px; _ width: 220px; padding: 12px; "> Minimum Width minimum width </div>

 

The results were very serious and we were very disappointed. Our only idea is also broken down! ? ?..... "Line feed !!?? "Then I will let you not wrap it !!!

<Div style = "border: 5px solid # f00; display: inline-block; * display: inline; zoom: 1; min-width: 220px; _ width: 220px; padding: 12px; white-space: nowrap "> Minimum Width minimum width </div>

 

It's okay! Add some content !!!

Even above, the problem of exceeding the browser width is also solved! Try other browsers. Ie7, ie8, firefox, and chrome all pass. Other gains!

3 position: absolute. well, this looks good.

<Div style = "border: 5px solid # f00; position: absolute; min-width: 220px; _ width: 220px; padding: 12px; white-space: nowrap "> minimum width </div>

 

Add some content:

 

Yes, as expected.

 

4 float: left is the most common case. It should also work!

Code:

<Div style = "border: 5px solid # f00; float: left; min-width: 220px; _ width: 220px; padding: 12px; white-space: nowrap "> minimum width </div>

 

Add the following content:

Expected!

I can think of these situations. Of course, there is something in the analysis that is not in place. Please leave it blank. Some browsers do not have a test. If not, try again.