简体   繁体   中英

Dynamically change the height of an element to another

A 列和 B 列
Well here we have two columns A and B. The thing is column A generally contains more content so its height is more (in this case 126px) and column B has less content so it remains shorter (here 94px). Now I want to make the height of B = A, considering that height of column A might change dynamically by AJAX but to keep pace with column A, height of column B must also change.
<div id="A">filer text</div> | <div id="B">filler text2</div> Now may be by using jQuery or some js we can get the height of element with id #A and set it to #B but the problem lies when the content changes dynamically.

$("#a").css("height", $("#b").css("height") );

Which then could be put in the callback function of, say:

$.ajax({
  ...
  success:function(msg){
    // could be optimized by storing off of the comparision
    if( $("#a").height() > $("#b").height() ){
      $("#b").css("height", $("#a").css("height") );
    }
  }
});

Without JQuery:

var d = document;
d.getElementById("B").style.height = d.getElementById("A").offsetHeight;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM