Two solutions to keep the height of two divs consistent (css js)_html/css_WEB-ITnose

I recently modified some code I wrote before and found some problems.

For example, two divs need to maintain the same height dynamically.

The css approach is: Carefully developed UI front-end framework for 5 years!

.code

4. right" style="margin-bottom:-10000px; padding-bottom:10000px;">

🎜>

If the actual height is not greater than 10000px, then this is no problem. If the actual height of one side is greater than 10000px, then in addition The height of one side can only be defined as 10000px, which does not meet the needs of practical applications.

After testing, this problem can be solved using js.

The code is as follows: UI front-end framework carefully developed for 5 years!

. Code

var height = document.getElementById("left").offsetHeight > document.getElementById("right"). offsetHeight ?

document.getElementById("left").offsetHeight : document.getElementById("right").offsetHeight;

document. getElementById("left").style.height = document.getElementById("right").style.height = height "px";

4. In addition, in actual application, there may be a problem that the above values ​​become more or less due to the padding attribute of the left div or the right div. For example, during the final assignment, it is found that left is 10px higher than right. This situation can only be solved by manually subtracting 10px from the code. This is also less than perfect.