css - 如何在 AngularJS 中将页脚保留在页面底部和内容下方?
问题描述
我尝试使用各种方法将页脚保持在某些内容下方,但似乎解决方案与 AngularJS 的动态内容的行为不符。
当页面大部分为空白时,我希望页脚位于页面底部
当页面展开时(或者一般来说只是大),我希望将页脚推到内容下方(不粘在页面本身上)
- 当我重定向页面时,应该遵循相同的逻辑
这是我为说明我的尝试而制作的一个小演示。我尝试使用我的页脚,但是一旦内容扩展position: absolute;
,我不知道如何更改它(或使用替代方案)。
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 ©
</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>
解决方案
没有必要使用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 ©
</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>
推荐阅读
- reactjs - 如何避免“选项”道具被内联初始化?
- python - Pandas 日期时间列操作
- jquery - 在 jQuery 中的 .off() 函数之后返回到按钮的链接
- angular - 角度输入不产生结果。在父组件中
- javascript - lodash 节流 - 绑定时未调用函数
- python - 生成一个数字列表——一般来说哪个更好?
- java - 子点击侦听器在可展开列表视图中不起作用
- ruby-on-rails - 无法写入未知属性“parent_id”、has_one 和 belongs_to
- apache-kafka - 读取 ksql 中的管道分隔值
- javascript - 通过替换在另一个对象中找到的属性名称来创建新对象