title: AngularJS Material Grid Tile height based on content
body: <p>Hi I have the following AngularJS Grid:</p>
  
  <pre><code>&lt;md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px"&gt;
    &lt;md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1"&gt;
        &lt;div class="blog-tile-bg" style="background-image:url('https://1.bp.blogspot.com/-B6IEBKet9Qc/VuBROoZ8y-I/AAAAAAAABDU/ez8KKA7c6UM/s1600/12671652_1253577308004984_1098070077500218081_o.jpg')"&gt;
        &lt;/div&gt;
      &lt;md-grid-tile-footer&gt;
        &lt;h3&gt;#1: (3r x 2c)&lt;/h3&gt;
      &lt;/md-grid-tile-footer&gt;
    &lt;/md-grid-tile&gt;
  &lt;/md-grid-list&gt;
  </code></pre>
  
  <p>Now as you can see I have a <code>div</code> with the class of <code>blog-tile-bg</code>, this element is set to <code>100% width</code> and <code>height</code> so it covers the whole tile.</p>
  
  <p>Now the issue I am having is that my <code>md-grid-tile-footer</code> element seems to overlay the <code>blog-tile-bg</code> by default using absolute positioning however I want this to stack below this element instead and scale in size based on content within it.</p>
  
  <p>I have not seen an example of this anywhere, every example I have seen includes the <code>md-grid-tile-footer</code> element with absolute positioning applied, for example: <a href="https://material.angularjs.org/latest/demo/gridList" rel="nofollow">https://material.angularjs.org/latest/demo/gridList</a></p>
  
  <p>I have tried removing the absolute positioning however it doesn't react the way it should.</p>
  
  <p>Any help would be great, thanks Nick</p>