Adaptive height of elements

Height adaptation of elements

Sometimes in the web layout, the height needs to be adjusted according to the content, so it cannot be fixed. Today we will talk about the minimum height adaptation

Attribute: min-height minimum height, but IE6 does not recognize this Attribute, height is similar to the min-height attribute in IE6;

The following is a way to solve 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 cannot recognize both)

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

min-height minimum height

max-height maximum height

min-width minimum width

max-width maximum width

The height of the floating element is adaptive

If the parent element does not set the height and width and it is inside If a floating element is included, then its height will collapse. Solving the height collapse problem is very simple. You can float the parent element, clear the method, etc., all of which can be achieved

hack1: Add the floating attribute to the parent element: float;

hack2: Add attributes to the parent element: overflow: hidden;

hack3: Add an empty div below the floating element, and add attributes to this element: clear: both; height: 0; overflow: hidden;

hack3 : Add this declaration to the parent element (recommended)

Parent element: after{content: "."; height:0; display:block; overflow:hidden; clear:both; visibility:hidden;}