设置元素边距以动态保持与另一个元素高度相同 jQuery

Question

我想将元素的底部边距设置为始终匹配不同元素高度的值。

因此，如果#footer 当前高度为 310px，我希望 .content-wrap 的底部边距也为 310px，并且无论#footer 高度如何，它们都保持相同。我有下面的代码，但它目前对边距没有任何影响......我之前没有使用 jQuery 来存储和输出 values/css，如你所知！

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

    function updateDivsMargins() {
        $('.content-wrap').each(function () {
            $(this).css({
                'margin-bottom': $("#footer").height();,
            });
       });
    }
    });

Answer 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 full screen preview。

设置元素边距以动态保持与另一个元素高度相同 jQuery

Set an elements margin to dynamically stay same as another elements height jQuery

css

jquery

height