如何在 AngularJS 中将页脚保留在页面底部和内容下方？ [复制]答案

【问题标题】：How to keep footer at the bottom of the page and below content in AngularJS? [duplicate]如何在 AngularJS 中将页脚保留在页面底部和内容下方？ [复制]
【发布时间】：2019-02-14 21:20:13
【问题描述】：

我尝试使用各种方法将页脚保持在某些内容下方，但似乎解决方案与 AngularJS 的动态内容的行为不符。

当页面大部分为空白时，我希望页脚位于页面底部
当页面展开时（或一般来说只是大），我希望将页脚推到内容下方（不粘到页面本身）
- 重定向页面时应该遵循相同的逻辑

这是我为说明我的尝试而制作的一个小演示。我尝试在页脚中使用position: absolute;，但我不知道在内容扩展后如何更改它（或使用替代方法）。

Plunker

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");
});

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;
}

<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"></script>

<body>
  <div>

    <header>
      <h4>Responsive header</h4>
      <a ui-sref="main">Main page</a>
      <a ui-sref="small">Small page</a>
      <a ui-sref="big">Big page</a>
      <hr>
    </header>


    <div class="main-view" ui-view></div>

    <footer class="footer">
      <h4>
        <span>demo website</span> 2018 &copy;
      </h4>
    </footer>

  </div>
  
  <!-- Assume: separate files -->
  <script type="text/ng-template" id="main.html">
    {{::small_text}}
    <div>
      <button ng-click="show_big_text=!show_big_text">
      {{show_big_text ? 'Hide' : 'Show'}} big text
    </button>
      <div ng-show="show_big_text" ng-repeat="text in ::big_text track by $index">
        {{text}}
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="other_small.html">
    {{::small_text}}
  </script>
  <script type="text/ng-template" id="other_big.html">
    <div ng-repeat="text in ::big_text track by $index">
      {{text}}
    </div>
  </script>

</body>
</html>

【问题讨论】：

标签： css angularjs footer

【解决方案1】：

没有必要使用position: absolute。只需提供margin-top 并将页脚放在 DOM 的末尾。然后页脚将自动从您的正文内容结束的地方开始

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");
});

body {
  height: 100%;
  margin: 0;
}

footer {
  background-color: #999999;
  color: #F1F1F1;
  text-align: center;
}

.footer {
  margin-top: 20px;
  width: 100%;
}

.main-view {
  background-color: #F1F1F1;
}

<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"></script>

<body>
  <div>

    <header>
      <h4>Responsive header</h4>
      <a ui-sref="main">Main page</a>
      <a ui-sref="small">Small page</a>
      <a ui-sref="big">Big page</a>
      <hr>
    </header>


    <div class="main-view" ui-view></div>

    <footer class="footer">
      <h4>
        <span>demo website</span> 2018 &copy;
      </h4>
    </footer>

  </div>
  
  <!-- Assume: separate files -->
  <script type="text/ng-template" id="main.html">
    {{::small_text}}
    <div>
      <button ng-click="show_big_text=!show_big_text">
      {{show_big_text ? 'Hide' : 'Show'}} big text
    </button>
      <div ng-show="show_big_text" ng-repeat="text in ::big_text track by $index">
        {{text}}
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="other_small.html">
    {{::small_text}}
  </script>
  <script type="text/ng-template" id="other_big.html">
    <div ng-repeat="text in ::big_text track by $index">
      {{text}}
    </div>
  </script>

</body>
</html>

【讨论】：

你错过了我的第一个要点。我的内容并不总是填满整个页面，所以我希望页脚在那些时候位于浏览器的底部。但是当页面变大时，是的，我希望它在内容结束的地方

【解决方案2】：

你可以试试这样的：

<div style="min-height: 100vh;position: relative;padding-bottom: 123px">
  ... // content
  <div style="position: absolute; bottom: 0; height: 123px">
  </div>
</div>

【讨论】：

当我用更多内容扩展页面时，这不起作用，或者只是有一个长页面。当我向下滚动时，页脚保持在同一位置。我希望它低于内容
现在检查，它可以工作