Take height from one div and apply it to another div

Question

Take height from one div and apply it to another div

Navigation

#1 by (2 votes)

2

I'm using the excellent FullCalendar plugin to add a calendar to a page of the site I'm doing.

It is very dynamic and the plugin calculates its size as soon as the page loads, keeping its size proportional to the div parent it is in. That is to say that its size is totally variable according to the size of the screen.

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

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

Look at 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><scriptsrc="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>

jquery layout-responsivo fullcalendar

asked by anonymous 30.01.2015 / 18:26

1 answer

Displaying date in date field List files from a directory by approach

score 2 · Accepted Answer

I've 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);    
});