Question

我有这个代码（make元素“.aaa”margin-bottom等于元素“.bbb”height）：

$('.aaa').css( 'margin-bottom', $('.bbb').css('height'));

它有效但是......如果“.bbb”元素的高度不同，如何让它动态工作？

我很抱歉，但我不知道如何更好地解释它。

修改：抱歉，这是一个代码示例，可以更好地理解我的意思：https://jsfiddle.net/d77n9ajx/1/

应该像第一个一样。

Answer 1

请尝试以下代码：

$('.aaa').css('margin-bottom', $('#bbb').height() + 'px');

Answer 2

您可以使用jQuery方法outerHeight()获取.bbb高度。

.outerHeight（[includeMargin]）返回：Number

描述：获取   当前计算的匹配集中第一个元素的高度   元素，包括填充，边框和可选的边距。返回一个   number（没有＆＃34; px＆＃34;）表示值，如果调用则为null   一组空元素。

获得.bbb身高后，您可以使用.aaa功能将其分配给margin-bottom .css()媒体资源。

代码段：

＆＃13;

(function() {
  var a = $(".aaa"),
    b = $(".bbb");

  var bOuterHeight = b.outerHeight();

  a.css("margin-bottom", bOuterHeight);

  var aMarginBottom = a.css("margin-bottom");
  console.log("bbb height:" + b.outerHeight() + " aaa margin bottom:" + aMarginBottom);
})();

＆＃13;

* {
  box-sizing: border-box;
}
div {
  height: 50px;
}
.aaa {
  background-color: gold;
}
.bbb {
  background-color: purple;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>

＆＃13;

Answer 3

这只是一个例子，目的是你添加代码：

$（＆＃39; .aaa＆＃39;）。css（＆＃39; margin-bottom＆＃39;，$（＆＃39; .bbb＆＃39;）。css（＆＃39; height＆＃ 39））;

如果调整元素bbb的大小

＆＃13;

.aaa{
 background-color:red; 
  height:100px;
  margin-bottom: 10px;
  }
.bbb{
  background-color: blue;
  height:50px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>
<input type="button" value="Change Div Size" onclick="ChangeDivSize()" />

＆＃13;

{{1}}

＆＃13;

Answer 4

这不是很整洁，但应该有效。

var previousHeight = null;
setInterval(function()
{
  var height = $('.bbb').height();
  if (height == previousHeight)
    return;

  $('.aaa').css('margin-bottom', height);
  previousHeight = height;

}, 10);

animate();

function animate()
{
  $('.bbb').animate({ height: '0px' }, 1000, function()
  {
    $('.bbb').animate({ height: '100px' }, 1000, animate);
  });
}

.aaa {
  background: red;
  height: 10px;
}

.bbb {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>

Answer 5

由于你有更多的.aaa和.bbb元素，你应该使用每个（）。

var calculateMargin = function(){
  // Make ".aaa" margin-bottom equal to ".bbb" height
  $('.aaa').each(function(){
    $(this).css( 'margin-bottom', $(this).next('.bbb').css('height'));
  });
};

calculateMargin();

$(window).on('resize', function() {
  calculateMargin();
});

.wrap {
  position: relative;
  float: left;
  margin: 10px;
}
.aaa {
  width: 200px;
	height: 200px;
  background-color: pink;
}
.bbb {
  position: absolute;
	bottom: 0;
	left: 0;
	background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="wrap">
  <div class="aaa"></div>
  <div class="bbb">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi.       Accusantium, veniam, porro voluptatum dolorem deleniti laborum sapiente...
  </div>
</div>

<div class="wrap">
  <div class="aaa"></div>
  <div class="bbb">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum...
  </div>
</div>

<div class="wrap">
  <div class="aaa"></div>
  <div class="bbb">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi.       Accusantium, veniam, porro...
  </div>
</div>

<div class="wrap">
  <div class="aaa"></div>
  <div class="bbb">
    Lorem ipsum dolor sit amet...
  </div>
</div>

<div class="wrap">
  <div class="aaa"></div>
  <div class="bbb">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit....
  </div>
</div>

<div class="wrap">
  <div class="aaa"></div>
  <div class="bbb">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi.       Accusantium, veniam, porro voluptatum dolorem...
  </div>
</div>

或.bbb并不总是.aaa的下一个兄弟，但是会在同一个容器内;比：

$('.aaa').each(function(){
    $(this).css( 'margin-bottom', $(this).parent().find('.bbb').first().css('height'));
});

两者都适用于你的例子。

Answer 6

这是解决问题的方法。

代码会正确调整aaa margin-bottom的大小，以防bbb div更改。

HTML

<div class="aaa">Test the code</div>

<div class="bbb">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

的jQuery

<script type="text/javascript">
        $(document).ready(function(){

        var bheight=$('.bbb').height();

        $('.aaa').css('margin-bottom',bheight);

        new ResizeSensor($('.bbb'), function() {
                bheight=$('.bbb').height();   
                $('.aaa').css('margin-bottom',bheight);
            }); //Function runs incase bbb div changes size
        });
    </script>

请包含以下脚本以运行您的代码：

<script src="js/jquery.min.js"></script>
<script src="js/ElementQueries.js"></script>
<script src="js/ResizeSensor.js"></script>

这些.js文件是我的本地版本。你自己下载它。您可以在以下链接中找到ElementQueries.js和ResizeSensor.js：http://marcj.github.io/css-element-queries/

希望这能满足您的关注!!

Answer 7

基于@mbadeveloper尝试：

$( ".bbb" ).resize(function() {
     $( ".aaa" ).css( "margin-bottom" , $( ".bbb" ).height()); 
});

希望语法正确：/

如何使div“margin-bottom”等于另一个div高度？

7 个答案: