Как сделать div «margin-bottom» равным другой высоте div?

У меня есть этот код (make element " $ ( '.aaa' ). Css ( 'margin-bottom' , $ ( '.bbb' ). Css ( 'height' )); " $ ( '.aaa' ). Css ( 'margin-bottom' , $ ( '#bbb' ). height () + 'px' ), равный элементу " 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 " > </ скрипт> <div class = "aaa" > </ div> <div class = "bbb" > </ div> <input type = "button" value = "Изменить размер Div" onclick = " ChangeDivSize () " /> " элементы имеют разную высоту?

Мне очень жаль, но я не знаю, как объяснить это лучше.

Изменить: Извините, это образец кода, чтобы лучше понять, что я имею в виду: https://jsfiddle.net/d77n9ajx/1/

Это должно быть похоже на первое.

javascript,jquery,css,css3,

1

Ответов: 7

1

Попробуйте следующий код:

outerHeight()
1

Это всего лишь пример, цель состоит в том, что вы добавляете код:

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

в случае изменения размера элемента bbb

.aaa
margin-bottom
.css()

0

Вы можете использовать метод jQuery для получения высоты.(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); })();.bbb

.outerHeight ([includeMargin]) Возвращает: Number

Описание: Получает текущую вычисленную высоту для первого элемента в наборе согласованных элементов, включая отступы, границу и необязательный запас. Возвращает число (без «px») представления значения или null, если вызывается на пустой набор элементов.

После того как вы получите высоту .bbb, вы назначаете его .aaa margin-bottomсвойству с функцией.* { 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>
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;
}

0

Это не очень аккуратно, но оно должно работать.

<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
bbb

0

Вот решение проблемы.

Код правильно изменяет размер aaaнижней границы в случае 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/

Надеюсь, это удовлетворит ваше беспокойство!

JavaScript, JQuery, CSS, CSS3,
Похожие вопросы
Яндекс.Метрика