title: How to keep footer at the bottom of the page and below content in AngularJS?
body: <p>I have tried to keep the footer below some content with various methods, but it seems that the solutions don't behave as expected with AngularJS's dynamic content.</p>
  
  <ul>
  <li><p>When the page is mostly blank, I want the footer to be at the bottom of the page</p></li>
  <li><p>When the page expands (or just big in general), I want the footer to be pushed below the content (<em>not sticky to the page itself</em>)</p></li>
  <li><ul>
  <li>The same logic should follow when I redirect the page</li>
  </ul></li>
  </ul>
  
  <p>Here is a small demo that I made to illustrate my attempt. I tried using <code>position: absolute;</code> for my footer, but I don't know how to change that (<em>or use alternatives</em>) once the content expands.</p>
  
  <p><a href="https://plnkr.co/edit/UAzPBS8REGjKC6f5QoUa?p=preview" rel="nofollow noreferrer">Plunker</a></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>var app = angular.module('myApp', ['ui.router']);
  app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.
    state("main", {
      url: "/",
      templateUrl: "main.html",
      controller: "mainCtrl"
    }).
    state("small", {
      url: "/other/small",
      templateUrl: "other_small.html",
      controller: "smallCtrl"
    }).
    state("big", {
      url: "/other/big",
      templateUrl: "other_big.html",
      controller: "bigCtrl"
    })
    $urlRouterProvider.otherwise('/');
  });
  
  app.controller('mainCtrl', function($scope) {
    $scope.small_text = "aaa";
    $scope.big_text = new Array(100).fill("AAA");
  });
  app.controller('smallCtrl', function($scope) {
    $scope.small_text = "aaa";
  });
  app.controller('bigCtrl', function($scope) {
    $scope.big_text = new Array(100).fill("AAA");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 100%;
    margin: 0;
  }
  
  footer {
    background-color: #999999;
    color: #F1F1F1;
    text-align: center;
  }
  
  .footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
  }
  
  .main-view {
    background-color: #F1F1F1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
    &lt;div&gt;
  
      &lt;header&gt;
        &lt;h4&gt;Responsive header&lt;/h4&gt;
        &lt;a ui-sref="main"&gt;Main page&lt;/a&gt;
        &lt;a ui-sref="small"&gt;Small page&lt;/a&gt;
        &lt;a ui-sref="big"&gt;Big page&lt;/a&gt;
        &lt;hr&gt;
      &lt;/header&gt;
  
  
      &lt;div class="main-view" ui-view&gt;&lt;/div&gt;
  
      &lt;footer class="footer"&gt;
        &lt;h4&gt;
          &lt;span&gt;demo website&lt;/span&gt; 2018 &amp;copy;
        &lt;/h4&gt;
      &lt;/footer&gt;
  
    &lt;/div&gt;
    
    &lt;!-- Assume: separate files --&gt;
    &lt;script type="text/ng-template" id="main.html"&gt;
      {{::small_text}}
      &lt;div&gt;
        &lt;button ng-click="show_big_text=!show_big_text"&gt;
        {{show_big_text ? 'Hide' : 'Show'}} big text
      &lt;/button&gt;
        &lt;div ng-show="show_big_text" ng-repeat="text in ::big_text track by $index"&gt;
          {{text}}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/script&gt;
    &lt;script type="text/ng-template" id="other_small.html"&gt;
      {{::small_text}}
    &lt;/script&gt;
    &lt;script type="text/ng-template" id="other_big.html"&gt;
      &lt;div ng-repeat="text in ::big_text track by $index"&gt;
        {{text}}
      &lt;/div&gt;
    &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>