Height Adaptive for elements

Height Adaptive for elements

Web page layout Sometimes some height needs to adjust according to content, so can not be fixed, today, say, the minimum height adaptive

Property: Min-height minimum height, but IE6 does not recognize the property, height is similar to min-height attribute in IE6;

Here's how to fix the bug problem:

Hack1:min-height:value; _height:value; (IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but not the underscore "_", and Firefox two do not know)

Hack2:min-height:value; _height:auto!important; Height:value; (recommended)

Min-height min. height

Max-height Maximum Height

Min-width min. width

Max-width Maximum width

Height adaptation of floating elements

If the parent element does not have a height and width, and it contains a floating element, then its height will be collapsed, the problem of resolving the height collapse is simple, can float the parent element, the purge method and so on, can achieve

Hack1: Adds a floating property to the parent element: float;

Hack2: Add attribute to parent element: Overflow:hidden;

Hack3: Add an empty div below the floating element and add properties to this element: Clear:both;height:0;overflow:hidden;

HACK3: Add this claim to the parent element (recommended)

Parent element: after{content: "."; height:0; Display:block; Overflow:hidden; Clear:both; Visibility:hidden;}

