CSS neutral Min-height and Max-height properties

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.

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

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

2, case HTML source code fragment:

<div class= "Divcss5-min" >     minimum height 60px </div> <div class= "Divcss5-max" >     maximum height 60px </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:

<div class= "Divcss5-min" >     min height for 60px<br/> DIVCSS5     add content <br/>     add content     <br/> DIVCSS5 Add content </div> <div class= "Divcss5-max" >     maximum height for 60px<br/> www.divcss5.com<br/>     Add content     <br/>     divcss5 add content <br/>     Add content </div>

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

5. Experiment

Min-height Max-height case in Browser

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.

CSS fix max-height style bug case

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.