The magical use of minimum height (min-height) in CSS layout

The wonderful use of minimum height in CSS layout - the minimum height can set the minimum height of a BOX. When the content is small, the height of the BOX can also be kept constant, and it will automatically extend downwards if it exceeds the minimum height. You can set the minimum height of a BOX. Minimum height, when there is less content, can keep the height of the BOX at a certain level. If it exceeds the height, it will automatically extend downwards. However, so far, only Opera and Mozilla support it. IE7 has also started to support it, but IE7 is in the testing stage, etc. It may take a long time for the official version to be released to the general public. Unless MS bundles it with a certain operating system, how can the minimum height be reasonably and effectively used on the existing basis (IE6 80-90%)?

Assuming there are two BOX, we need its minimum height to be 150PX.

CSS

Here is a quote:

Here is a quote:

<div>The minimum height is not maintained at 150px in IE</div>

<div>Minimum height can set the minimum height of a BOX. When the content is small, the height of the BOX can also be kept constant</div>

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

solution

Set a height for IE

Here is a quote:

* html div.box1,* html div.box2{height: 150px;}

wellstyled.com’s solution is to use CSS attribute selectors (Attribute Selectors)

Here is a quote:

div.box1,div.box2{......height: 150px;}

/* IE relies on this to maintain a minimum height, and will automatically extend downwards if it exceeds it */

div[class].box1,div[class].box2{height: auto;}

/* DIV object with class selector (class) attribute */

Naturally, IE does not support it. Opera and Mozilla support reading this height. Applicable occasions: search, article and other pages (100% height is not used, so that when the content found is less, the page will not be too short).