Home  >  Article  >  Web Front-end  >  HTML min-height usage summary

HTML min-height usage summary

巴扎黑
巴扎黑Original
2017-06-07 16:51:153321browse

The min-height attribute sets the minimum height of the element. This attribute value sets a minimum limit on the height of the element. Therefore, the element can be taller than the specified value, but cannot be shorter than it. Negative values ​​are not allowed to be specified.

Below we summarize the usage of min-height:

1.The properties min-height and max-height in CSS

Why do we To use 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.

HTML min-height usage summary

2.Notes on min-height

Method 1:
min-height:160px; Set object box The minimum height is applicable to Firefox and IE7+;
height:auto!important; Set the height of the object box without automatic positioning. Use !important to prioritize the lower height positioning setting;
height:160px; Set the object Height, due to the use of the !important attribute, this attribute is only recognized by IE6.

HTML min-height usage summary

3.IE6 does not support perfect solutions such as min-height or max-width_html/css_WEB-ITnose

again It's IE6! ! ! The annoying IE6 does not support min-height, but in actual operation, this attribute is very needed. So how to implement it under IE6? Please see the perfect solution provided by geniusalien:
(Geniusalien’s warm reminder: The min-height operation method in this article is tried on min-width, max-width, and max-height. Follow the same solution as below!)

4.DIV The wonderful use of CSS web page layout minimum height (min-height)_Experience exchange

Minimum height can set the minimum height of a BOX. When it Even when the content is small, the height of the BOX can be kept constant


The current effect is that the minimum height is not maintained at 150px in IE.

HTML min-height usage summary

5.Web front-end newbie’s notes: The difference between height and min-height

Browser reference base: Firefox, Chrome, Safari, Opera, IE; * IE6 does not support the CSS min-height attribute. Definition of minimum height: 1. The element has a default height; 2. When the content exceeds the default height of the element, the height of the element increases as the content increases

[Related recommendations]

1.php.cn Original HTML5 video tutorial

2.Han Shunping’s latest p css basic video tutorial in 2016

##3.

Han Shunping’s latest in 2016 html basic video tutorial

4.

Han Shunping’s latest html advanced video tutorial in 2016

The above is the detailed content of HTML min-height usage summary. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn