How to use min-height and max-height in CSS-HTML Tutorial-php.cn

The maximum and minimum height styles are very convenient to use and meet the disadvantages of fixed height. This article will introduce to you how to usemin-heightandmax-heightin CSS.

Css min-height application place explanation

We sometimes set an object box to prevent the object from being unable to open when there is 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.

CSS maximum and minimum height directory

Syntax and structure

Maximum and minimum height usage cases

max-height min-height maximum and minimum height summary

Extended reading:

1, CSS hides overflow content

2, hides html content

3, css hides collection

4, css height

5, cssmin-width

6, cssmax-width

Grammar and structure

The values of min-height and max-height are numbers + html units

Exp

min-height:50px 最小高度50px max-height:50px 最大高度50px

Copy after login

CSS usage structure

div{min-height:50px } div{max-height:50px }

Copy after login

Maximum and minimum height usage cases

We set a minimum height (min-height:) and maximum height (max-height) limit for the two object boxes. 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

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

Copy after login

2. Case html source code fragment:

 最小高度为60px 
  最大高度为60px

Copy after login

We will increase the content of the two objects

Html code:

 最小高度为60px
 增加内容
 增加内容
 增加内容 
  最大高度为60px
 m.sbmmt.com
 增加内容
 增加内容
 增加内容

Copy after login

Here we will increase the content in the two object boxes beyond the 60px height limit

Tips, if you name the css ".div-max" Add theoverflow:hidden style to hide the maximum height and display the overflow content.

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 If the order exceeds the minimum height limit, the object will automatically increase in height. 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.

There are so many ways to use min-height and max-height. For more exciting information, please pay attention to other related articles on the php Chinese website!