CSS implementation methods with high self-adaptability to elements

1. Use background images to achieve high self-adaptability.
This method is a visual deception, but the height of the layout element is not equal. The principle is to include highly-adaptive blocks (such as a and B) in a container C and provide a background image for container C, this image contains the background of high-adaptive blocks A and B (pixels must be accurate if the image is processed well ). When the height of A and B varies, the background image of container C is the height of the higher image because the higher part opens the container C, as a result, the visual height of A and B seems to be equal, but they are actually not equal.
See the actual operation method and demo: http://www.52css.com/article.asp? Id = 898.

 

2. Use padding and padding (recommended !)
Method: add the following CSS attributes to A and B: padding-bottom: margin PX; margin-bottom:-margin PX; and add the CSS Attribute Overflow: hidden to container C;
This method can be summarized as "Hiding container overflow", "positive patch", and "negative patch.
Demo: http://www.hemin.cn/blog? P = 761 # More-761

3. Use table
The old table layout can be easily implemented.

 

4. Use Javascript
The Code is as follows:

Code

 1 function equal_height(ele1,ele2){
2      if(!(document.getElementById(ele1))) return false
3      if(!(document.getElementById(ele2))) return false;
4      var mainCon=document.getElementById(ele1).scrollHeight;
5      var sidebar=document.getElementById(ele2).scrollHeight;
6      layoutHeight=Math.max(mainCon,sidebar);
7      document.getElementById(ele1).style.height=layoutHeight+"px";
8      document.getElementById(ele2).style.height=layoutHeight+"px";
9  }

 

The above is the main part of the code. It is used to determine the maximum height and replace the height of all columns with the highest height. The max method of the math object can accept any number of parameters, so this judgment function can ensure high self-adaptability of multiple columns.