Perfect control of Div minimum height and Div auto-fit height

This article will focus on how to control the minimum height of the DIV and the Self-fit height of the Div. If we need to set a div height, when the content inside exceeds this height, make the container automatically open, that is, the adaptive height of the div. When there is very little information in it, we will set it to a minimum fixed height.

How to Control Div minimum height and Div auto-fit height

When we use Div layout, we often encounter this situation: we need to set a div height, when the content inside exceeds this height, let the container be automatically opened, that is, the DIV adaptive height. When there is very little information in it, we will set it to a minimum fixed height.

We know that in IE6, if the height of the sub-container exceeds that of the parent container, the parent container will be opened by the container, so we can directly set a height value. However, IE7 and Firefox won't work, and it won't be automatically opened.

If you want to set the DIV adaptive height, we can use the height: auto; attribute. However, IE6 does not support this attribute. Is it a headache? In fact, it is not difficult to solve this problem, and there are also many methods. Here we recommend one: (assume that the minimum height of the DIV to be controlled is PX, and when it is exceeded, let the information in it be automatically supported ):

.div{   height:auto!important;   height:100px;   min-height:100px   }  

Note: Because! Important can be read in IE7 and Firefox, and the weight is higher than the following height: 100px. Therefore, when IE7 and Firefox are displayed, the front Height: Auto is used! Important; IE6 cannot recognize it! Important and auto do not work on it. Therefore, the height: 100px style is applied. Min-Height: 100px indicates that the minimum Div height is 100px; this attribute can be identified in both IE7 and Firefox.

In this perfect way, you can set the minimum height of the DIV and the CSS style of the DIV adaptive height. It is also compatible with IE6, IE7, and Firefox!

Perfect control of Div minimum height and Div auto-fit height