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

我有这个代码(make element ")。Aaa " margin-bottom = element "。bbb"高度):

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

它工作，但是…如何使它动态地工作。元素有不同的高度?

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

编辑:对不起，这是一个代码示例，以更好地理解我的意思:https://jsfiddle.net/d77n9ajx/1/

应该和第一个一样

尝试以下代码:

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

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

。outerHeight([includeMargin])返回:Number

描述:获取匹配集合中第一个元素的当前计算高度元素，包括内边距、边框和可选的边距。返回一个值的数字(不带"px")表示形式，如果调用则为null元素的空集合。

当你得到。bbb的高度，你分配给.aaa margin-bottom属性与.css()函数。

代码片段:

(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);
})();

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

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

这只是一个示例，目标是您添加代码:

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

在元素BBB

function ChangeDivSize(){
  $('.bbb').height(100);
  $('.aaa').css( 'margin-bottom', $('.bbb').css('height'));
}

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

<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()" />

这不是很整洁，但应该可以工作。

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>

这是你的问题的解决方案。

如果你的bbbdiv也改变了，代码会正确地调整aaa margin-bottom的大小

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/

希望这能满足你的关切!!

因为你有更多的。aaa和。bbb元素，你应该使用each()。

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'));
});

基于@mbadeveloper试试这个:

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

语法正确:/

相关内容

最新更新

热门标签：