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

Question

我想设置元素的margin-bottom来始终匹配不同元素height的值。

所以，如果#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。