Take a div’s height and apply it to another div

Question

I’m using the excellent Fullcalendar plugin to add a calendar to a page on the site I’m doing.

It is very dynamic and the plugin calculates its size as soon as the page is loaded, keeping its size proportional to the div parent you are in. This means that your size is totally variable depending on the screen size.

My page is divided by two div occupying each 50% of the screen, and in one of them is the calendar, in the other a random content. However I need this second div is the same height as div of the calendar, in order to maintain the layout.

I need a script to take the timing of the calendar and apply it to the content. I tried several alternatives here and none worked.

Watch the Jsfiddle with the code.

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var events_array = [
        {
        title: 'Test1',
        start: new Date(2012, 8, 20),
        tip: 'Personal tip 1'},
    {
        title: 'Test2',
        start: new Date(2012, 8, 21),
        tip: 'Personal tip 2'}
    ];

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        events: events_array,
        eventRender: function(event, element) {
            element.attr('title', event.tip);
        }
    });
});

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.md-6{width:50%;float:left;}
.content{width:100%;float:left;background:rgba(0,0,0,0.1);padding:15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<div class="md-6">
    <div style="border:solid 2px red;">
        <div id='calendar'></div>
    </div>
</div>
<div class="md-6">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed magna est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum elit et lacus pellentesque aliquet. Aliquam eu orci sed urna ultricies sollicitudin. Nulla posuere, mauris eget facilisis fermentum, purus enim lobortis magna, sit amet malesuada mi metus in libero. Etiam rutrum orci quis mi scelerisque hendrerit. Proin sed lacus eros. Vestibulum eu lorem at felis cursus efficitur at ac est.
    </div>
</div>

Answer 1

I added two lines to the end of your code:

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var events_array = [
        {
        title: 'Test1',
        start: new Date(2012, 8, 20),
        tip: 'Personal tip 1'},
    {
        title: 'Test2',
        start: new Date(2012, 8, 21),
        tip: 'Personal tip 2'}
    ];

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        events: events_array,
        eventRender: function(event, element) {
            element.attr('title', event.tip);
        }
    });

    var tamanho = $("#calendar").height();

    $(".content").height(tamanho);    
});