Home > Article > Web Front-end > CSS min-height minimum height max-height maximum height
Why do we use the min-height and max-height style properties?
Css min-height application place explanation
We sometimes set an object box to prevent the object from being able to open when it has no content, but the content cannot be determined, so the height cannot be fixed. At this time, we You will need css to set min-height to raise the object box. When the content is small, the minimum height can display the content. If the content is more than the minimum height, the object will increase as the content increases.
Css max-height maximum height application explanation
This attribute is rarely used, probably to avoid too much content that will cause the height to be too high and affect the beautification and uniformity of the layout. At this time, we set the maximum height limit . For example, a table tr td table object contains a picture, and the height of the picture is uncertain. If it is too high and you don’t want the picture to break the tr td table, it is necessary to limit the maximum height of the picture through css max-height. of.
CSS maximum and minimum height directory
Syntax and structure
Maximum and minimum height usage cases
max-height min-height maximum and minimum height summary
css max-width
1. Grammar and structure
1. Grammar
The values of min-height and max-height are numbers +html unit
min-height:50px minimum height 50px
max-height:50px maximum height 50px
2. CSS usage structure
div{ min-height:50px }
div{max-height:50px }
2. Maximum and minimum height usage cases
We set two object boxes with a minimum height (min -height:) and the maximum height (max-height) limit. In order to facilitate the observation of the application case effect, we set the CSS width and css border style of the two boxes to be the same.
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 snippet:
The minimum height is 60px
The maximum height is 60px
3. Screenshot of the maximum and minimum height cases
css maximum height minimum height Case screenshot
Css div minimum and maximum height style case screenshot
4. We increase the content of the two objects
Html code:
Minimum height is 60px
DIVCSS5 Add content
Add content
divcss5 adds content
The maximum height is 60px
www.divcss5.com
Add content
divcss5 add content
Add content
Here we increase the content in the two object boxes beyond the 60px height limit
5. Experiment Screenshot
Min-height max-height case screenshot in browser
Browser test min-height and css max-height screenshot
Tips, if you name the css here Add the overflow:hidden style to ".divcss5-max" to hide the maximum height and display the overflow content.
Screenshot of CSS solution to max-height style bug case
DIV+CSS case solution to maximum height max-height compatibility
6, DIVCSS5 case explanation
We set up two boxes, one with a minimum height limit, and one with a maximum height limit. If the object with the minimum height limit does not have much content, it will not exceed the minimum height limit. At this time, the object will display the minimum height limit value. If the content is more, it exceeds the minimum height. Limit the order that can be placed, and the object will automatically increase in height at this time. The latter has a maximum height limit of max-height. When the content is small, there will be no difference. However, when there is a lot of content and the maximum height limit cannot be accommodated, the content will exceed the maximum height limit, but the object itself is still the maximum height, so the content will appear. If the overflow exceeds the object box, we can use the css overflow property to hide the overflow content.
3. Summary of max-height min-height maximum and minimum height
The maximum and minimum height styles are very convenient to use and meet the disadvantages of fixed height. However, IE6 does not support it now. 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.
The above is the detailed content of CSS min-height minimum height max-height maximum height. For more information, please follow other related articles on the PHP Chinese website!