title: Fullcalendar: Resize height on window resize (aka shrink while preserving aspect ratio)
body: <p>I have been completely unable to resize the height of an FC (fullcalendar). I am trying to fit a FC in a div and would like the FC to fill the div completely but not go outside of it. While initializing the calendars the height attribute seems to have no effect. However the width of the FC seems to fit that of its parent div and furthermore, it resizes accordingly. But the FC's height does not. This creates a long and narrow FC that is no longer readable. How can I make the FC resize while conserving its aspect ratio so that it doesn't become unreadable?
  Thanks in advance</p>
  
  <p>P.S:
  Just to be clear I have read the docs and tried setting the FC's height dynamically using JQuery (as well as through css) but this has not worked and I don't understand why.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    //----------SCHEDULE INITs----------
    $('#schedule_1').fullCalendar({
      theme: false,
      // contentHeight: $('#scheduleDiv').height(),
      contentHeight: "auto",
      //height: "auto",
      defaultDate: '2000-01-03',
      defaultView: 'agendaWeek',
      columnFormat: 'dddd',
      allDaySlot: false,
      minTime: "07:00:00",
      maxTime: "21:00:00",
      navLinks: false,
      editable: false,
      eventLimit: true,
      header: false
    });
  
  
    $('#schedule_1').fullCalendar('option', 'height', 100); //Seems to have no effect...
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    position: relative;
    min-height: 100%;
  }
  
  body {
    background-color: #FCFDFE;
    min-height: 100%;
    margin-bottom: 60px;
    overflow-y: scroll;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.css"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container-fluid" id="main"&gt;
  
      &lt;div class="col-md-8"&gt;
        &lt;div id="schedule_1"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="col-md-4"&gt;
        &lt;p&gt;Second Column!&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>