jQuery实现一个元素是另一个元素宽度，或两个元素高度根据内容的增长保持一直。...

最新推荐文章于 2020-10-19 13:43:21 发布

weixin_34290390

最新推荐文章于 2020-10-19 13:43:21 发布

阅读量339

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/glelaine/blog/40910

版权

2019独角兽企业重金招聘Python工程师标准>>>

$('.b').height($('.a').height()*0.8);

$('.b').height($('.a').height()*1);

//当b的高度大于a，让b区域显示滚动条

$(".b").height() < $(".a").height()? $(".b").height('auto') : $(".b").css('overflow-y', 'scroll').height($(".a").height());

实例：

<!doctype html>
<html>
<head>
<style>
.a, .b{width:30%; float:left; border:1px solid #000;}
</style>
<script src="http://www.mi.com/js/libs/jquery.js"></script>
<script>
$(function(){
var res = function(){
  $('.a, .b').height('auto');
  var _h = $('.a').height() > $('.b').height() ? $('.a').height() : $('.b').height();
  $('.a, .b').height(_h);
}
res();
$('.add').on('click', function(e){
  var _for = '.' + $(this).attr('for');
  var _tep = $(this).attr('tep');
  $(_for).html($(_for).html() + _tep);
  res();
  e.preventDefault();
});
});
</script>
</head>
<body>
<div class="a">
  aaaaaaaaaaa<br/>
  aaaaaaaaaaa<br/>
  aaaaaaaaaaa<br/>
  aaaaaaaaaaa<br/>
  aaaaaaaaaaa<br/>
  aaaaaaaaaaa<br/>
  aaaaaaaaaaa<br/>
</div>
<div class="b">
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
  bbbbbbbbbb<br/>
</div>

<a href="#" class="add" for="a" tep="aaaaaaa<br/>">add a</a>
<a href="#" class="add" for="b" tep="bbbbbb<br/>">add b</a>
</body>
</html>