Установите границу элементов, чтобы она динамически оставалась такой же, как высота других элементов. JQuery

jquery css height

420 просмотра

1 ответ

Я хотел бы установить поле margin-bottom элемента, чтобы оно всегда совпадало со значением другой высоты элемента.

Так что, если текущая высота #footer равна 310px, я бы хотел, чтобы нижнее поле для .content-wrap также составляло 310px, и чтобы они равнялись независимо от высоты #footer. У меня есть код ниже, но в настоящее время он никак не влияет на поля ... Я не использовал jQuery для хранения и вывода значений / css, как вы можете сказать!

    $(function () {
    updateDivsMargins();
    $(window).resize(updateDivsMargins);

    function updateDivsMargins() {
        $('.content-wrap').each(function () {
            $(this).css({
                'margin-bottom': $("#footer").height();,
            });
       });
    }
    });
Автор: Scott Eldo Источник Размещён: 08.11.2019 11:19

Ответы (1)


1 плюс

Решение

У вас есть синтаксическая ошибка в 'margin-bottom': $("#footer").height();,

Удалите точку с запятой, ;и она работает как положено.

Вот рабочий фрагмент:

 $(function() {
   updateDivsMargins();
   $(window).resize(updateDivsMargins);

   function updateDivsMargins() {
     $('.content-wrap').each(function() {
       $(this).css({
         'margin-bottom': $("#footer").height(),
       });
     });
   }
 });
#footer {
  position: absolute;
  width: 100%;
  height: 20%;
  background: tomato;
}

.content-wrap {
  background: lavender;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dignissimos, qui corporis ipsum obcaecati mollitia praesentium consequuntur architecto sint illum facilis voluptas, maxime repellat molestiae quis. Labore, quibusdam consequuntur ab.</div>
<hr>
<div class="content-wrap">
  Content wrap lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ut aperiam consequuntur hic aliquid perferendis quo eligendi rem, sint ea, officia totam. Sequi enim, quaerat. Assumenda, nulla atque tempora totam.
</div>
<div id="footer"></div>

А вот и полноэкранный предварительный просмотр JSFiddle .

Автор: Preetesh Размещён: 20.08.2016 01:11
Вопросы из категории :
32x32