title: Angular Material Dialogs fixed height issues across browsers
body: <p>I've been pulling my hair out trying to get to a solution that works with all my use cases and think I finally found one that I wanted to share.</p>
  
  <p>What I wanted was a sticky header, sticky footer and scrollable content that worked in and out of fullscreen mode. It also needed to work across all browsers (Yes, you too Safari!).</p>
  
  <p>Finally, I didn't want to resort to CSS overrides because I know Angular Material 1.x.x hasn't been playing nicely with Safari.</p>
  
  <p>The following template is what I arrived at. Shout if you have improvements or if it helps!</p>
  
  <pre><code>&lt;md-dialog flex-xl="25"
             flex-lg="30"
             flex-md="40"
             layout="column"&gt;
    &lt;md-toolbar class="md-toolbar-tools" flex="none"&gt;
      &lt;h2&gt;Add Friends&lt;/h2&gt;
      &lt;span flex&gt;&lt;/span&gt;
      &lt;md-button ng-click="vm.cancel()"&gt;
        &lt;md-icon&gt;clear&lt;/md-icon&gt;
      &lt;/md-button&gt;
    &lt;/md-toolbar&gt;
  
    &lt;md-content flex-xs="100" flex-sm="100"&gt;
      &lt;!--Your content here--&gt;
    &lt;/md-content&gt;
  
    &lt;md-dialog-actions flex="none"&gt;
      &lt;span flex&gt;&lt;/span&gt;
      &lt;md-button ng-click="vm.cancel()"&gt;
        Close
      &lt;/md-button&gt;
    &lt;/md-dialog-actions&gt;
  &lt;/md-dialog&gt;
  </code></pre>
  
  <p>You'll note the flex-xs="100" and flex-sm="100". I fullscreen in those scenarios so adjust accordingly.</p>