title: UI-Router: Height:100% on body element ignoring nested view height
body: <p>I'm building an angular application that frequently uses nested views. Certain views, however, are taller than the other elements on the page and end up extending well beyond the end of the parent view. </p>
  
  <p>I'm using <a href="http://ryanfait.com/sticky-footer/" rel="nofollow noreferrer">Ryan Fait's Sticky Footer</a> so I have a wrapper around a containing div set to <code>height:100%</code> and I would have expected the page to just adapt and move the footer to the bottom of the nested view however I'm seeing the style elements of the footer <code>border</code> and <code>background-color</code> are remaining at end of the parent div while the content of the footer is being pushed to the end of the nested div.</p>
  
  <p>Including an image as I'm struggling with getting the language exact:
  <a href="https://i.stack.imgur.com/sqjou.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sqjou.png" alt="enter image description here"></a></p>
  
  <p>I'm really looking for any solution from fixing the css to something that seems hackier like changing the footer or using ng-if/ng-class on certain pages. I'm imagining I'm misunderstanding something about CSS/UI-Router but I can't really track it.</p>
  
  <p>The code isn't really interesting but here is it?</p>
  
  <p><strong>CODE</strong></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-css lang-css prettyprint-override"><code>.wrapper {
    min-height: 100%;
    margin-bottom: -50px;
  }
  .push {
    height: 50px;
  }
  .footer {
    display: block;
    height: 50px;
  }
  .nested {
    max-height: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;div&gt;
        &lt;h1&gt;Some text&lt;/h1&gt;
        &lt;ui-view class="nested"&gt;&lt;/ui-view&gt;
      &lt;/div&gt;
      &lt;div class="push"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;footer class="footer"&gt;
      &lt;span&gt;some copy&lt;/span&gt;
    &lt;/footer&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>