CSS min-height min height max-height max height (forward)

CSS min-height min height max-height max height

DIV css min-height min height and max-height Maximum height tutorial

Why should we use the Min-height and Max-height style properties?

CSS min-height Application Local explanation
We sometimes set an object box to avoid the object when there is no content when not open, but the content is not sure how much is not fixed height, this time we will need CSS to set the min-height minimum Height brace high Object box. When the content is less than the minimum height can display the content, if the content of the extra minimum height can be installed, the object will also increase with the content.

CSS max-height Maximum Height application explanation
This property is rarely used, and may be to avoid too much content that will be too high to affect the layout of the landscape uniform, this time we set the maximum height limit. For example, a table TR TD Table Object loaded with a picture, and the picture height is not sure, if too high do not want the picture burst TR TD form, this time through the CSS max-height limit the maximum height of the picture is necessary.

CSS Maximum minimum height table of contents

1. Grammar and structure
2. Maximum minimum Height usage case
3. Max-height min-height Maximum Minimum height summary

Extended reading:
1, CSS hidden beyond overflow content
2. Hide HTML content
3. CSS Hidden Collection
4. CSS Height
5. CSS Min-width
6. CSS Max-width

First, grammar and structure-TOP

1. Grammar
The values for Min-height and max-height are numeric +html units

Exp
min-height:50px min. height 50px
max-height:50px Maximum Height 50px

2. CSS usage structure
div{min-height:50px}
div{max-height:50px}

Second, maximum minimum height usage case-TOP

We set the 2 object box to a minimum height (min-height:) with a maximum height (max-height) limit, in order to facilitate the observation of the application case effect, we set 2 boxes CSS width same and CSS border border style.

1. Corresponding CSS code

1. . divcss5-min,.divcss5-max{width:300px; border:1px Solid #F00}
2. . divcss5-min{min-height:60px}
3. . divcss5-max{max-height:60px; margin-top:10px}

2, case HTML source code fragment:

1. <div class="Divcss5-min">
2. Minimum height is 60px
3. </div>
4. <div class="Divcss5-max">
5. Maximum height is 60px
6. </div>

3. Maximum minimum height case

Css Div Most small maximum height style case

4, we will increase the content of two objects
HTML code:

2. <div class="Divcss5-min">
4. Minimum height 60px<br />
6. DIVCSS5 Add content <br />
8. Add Content <br />
10. DIVCSS5 Add Content
12. </div>
14. <div class="Divcss5-max">
16. Maximum height is 60px<br />
18. Www.divcss5.com<br />
20. Add Content <br />
22. DIVCSS5 Add content <br />
24. Add content
26. </div>

Here we have added 2 object box content to exceed 60px height limit

5. Experiment

Browser test min-height and CSS Max-height

Little tricks, if you name the CSS ". Divcss5-max" in the Overflow:hidden style to hide the maximum height display overflow content.

DIV+CSS Case resolution Maximum height max-height compatible

6, DIVCSS5 case explanation
We set 2 boxes a limit minimum height, a set limit maximum height, the minimum height limit object if the content does not exceed the limit minimum height, the object will display the minimum height limit value, if the content more than the minimum height limit can be placed on the order, the object will automatically increase. While the latter maximum height max-height limit, the content will not make any difference, but the content is more time, and the maximum height limit can not fit the time, the content will exceed the maximum height limit, but the object itself is still the maximum height, so that the content overflow beyond the object box, we can use CSS The overflow property hides overflow content.

Third, max-height min-height maximum minimum height summary-TOP

The maximum minimum height style is very convenient to meet the fixed height disadvantage, but now IE6 does not support, IE7 and above browsers and other browsers are supported, in the next article we will introduce IE6 min-height compatibility and IE6 max-height compatibility.

If you want to reprint, please indicate the source and origin of the article URL: http://www.divcss5.com/rumen/r422.shtml

CSS min-height min height max-height max height (forward)