Legen Sie einen Rand für die Elemente fest, der dynamisch der Höhe der anderen Elemente entspricht. JQuery

Question

Ich möchte den unteren Rand eines Elements so einstellen, dass er immer dem Wert einer anderen Elementhöhe entspricht.

Also wenn #footer aktuelle Höhe 310px ist Ich möchte, dass die Rand-Unterseite von .content-wrap auch 310px und sie zu tay das gleiche unabhängig von # Fußhöhe. Ich habe den folgenden Code, aber es hat derzeit keinerlei Auswirkungen auf den Rand ... Ich habe jQuery nicht verwendet, um Werte/CSS zu speichern und auszugeben, wie Sie sehen können!

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

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

Answer 1

Sie haben einen Syntaxfehler bei 'margin-bottom': $("#footer").height();,

Entfernen Sie das Semikolon ; und es funktioniert wie erwartet.

Hier ist der Arbeits Schnipsel:

$(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>

Und hier ist die JSFiddle full screen preview.