Question

我想将元素的margin-bottom设置为始终匹配不同元素高度的值。

因此，如果#footer当前高度为310px，我希望.content-wrap的margin-bottom也是310px，无论#footer高度如何，它们都是相同的。我有以下代码，但它目前对边缘没有任何影响...我没有使用jQuery来存储和输出值/ 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相同

1 个答案: