他の要素の高さと動的に同じになるように要素マージンを設定するjQuery

Question

要素のマージンボトムを常に異なる要素の高さの値に一致させるように設定したいと思います。

#footerの現在の高さが310pxの場合、＃contentの巻き返し幅も310pxになり、#footerの高さにかかわらず同じように調整したいと思います。私は以下のコードを持っていますが、現在のところマージンには何の影響もありません。私はjQueryを使用して値を保存していません。

$(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です。