Two solutions for two div height consistency (css+js)

Recently modified some of the previously written code, found a point problem.

For example, 2 div needs to maintain a consistent height dynamically.

The CSS approach is: 5 years of careful development of the UI front-end framework!

. Code

2. <div style="Overflow:hidden">
6. <div id="left" style="margin-bottom:-10000px; padding-bottom:10000px; " ></div>
10. <div id="right" style="margin-bottom:-10000px; padding-bottom:10000px; " ></div>
14. </div>

If the actual height is not greater than 10000px, then this is no problem, if one side of the actual height is greater than 10000px, then the height of the other side can only be defined as 10000px, not in line with the actual use of the demand.

After testing, JS can solve this problem.

The code looks like this: 5 years of well-developed UI front-end framework!

. Code

2. var height = document.getelementbyid (" left "). Offsetheight > document.getelementbyid (" "Right" ). offsetheight ?   
4.     document.getelementbyid (" left "). Offsetheight : document.getelementbyid (" right "). offsetheight;  
10. document.getElementById ("left"). Style.height = document.getElementById ("right"). Style.height = Height + "px";

In addition, in practice, there may be problems with the above values being more or less due to the existence of the padding attribute in the left Div or right div. For example, when the final assignment found that left is higher than right 10px, this situation only manually in the code to reduce 10来 resolved. It's also a less than perfect place.

Two solutions for two div height consistency (css+js)