Html CSS-过渡时绝对显示的内容及其高度

我在Angular中有一个div，其中包含我的主视图。我也有一个页脚坐在它下面。当我在视图之间切换（单击链接）时，页脚会移动到页面顶部，因为视图的位置绝对可以使切换平稳移动

我的HTML：

<div class="view-container">
  <div ng-view class="view"></div>
  <div class='footer'>This is the footer</div>
</div>

在保持平稳过渡的同时，保持容器底部的最佳方式是什么

代码段中来自plunker的代码：

（函数（角度）{
"严格使用",；
angular.module（'anchoringExample'，['ngAnimate'，'ngRoute']））
.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（“/”{
templateUrl:'home.html'，
控制器：“HomeController作为主控制器”
});
$routeProvider.when（'/profile/：id'{
templateUrl:'profile.html'，
控制器：“配置文件控制器作为配置文件”
});
}])
.run（['$rootScope'，函数（$rootScope）{
$rootScope.records=[
{id:1，标题：“Beulah Roob小姐”}，
{id:2，标题：“特伦特·莫里塞特”}，
{id:3，标题：“Ava Pouros小姐”}，
{id:4，标题：“Rod Pouros”}，
{id:5，标题：“阿卜杜勒·赖斯”}，
{id:6，标题：“老劳里·卢瑟福”}，
{id:7，标题：“Nakia McLaughlin”}，
{id:8，标题：“Jordon Blanda DVM”}，
{id:9，标题：“罗达之手”}，
{id:10，标题：“Alexandrea Sauer”}
];
}])
.controller（'HomeController'，[function（）{
//空的
}])
.controller（'ProfileController'，['$rootScope'，'$routeParams'，函数（$rootScope，$routeParams）{
var索引=parseInt（$routeParams.id，10）；
var record=$rootScope.records[index-1]；
this.title=record.title；
this.id=record.id；
}]);
})（窗口角度）
.record{
显示：块；
字体大小：20px；
}
.个人资料{
背景：黑色；
颜色：白色；
字体大小：100px；
}
.查看容器{
位置：相对位置；
}
.view容器>.view.ng-animate{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
最小高度：500px；
}
.view.ng-enter、.view.ng-leave、，
.记录ng-anchor{
过渡：0.5s线性所有；
}
.view.ng-enter{
转化：translateX（100%）；
}
.view.ng-enter.ng-enter-active、.view.ng-leave{
转化：translateX（0%）；
}
.view.ng-leave.ng-leave-active{
转化：translateX（-100%）；
}
.记录。ng-anchor-out{
背景：红色；
}

示例-示例锚定示例生产

这是页脚
{{profile.title}}
欢迎来到主页
请单击一个元素

页脚总是卡在页面底部可以吗？另外，动画中的div高度是否总是一样的？不，这是我面临的问题，页脚不应该粘在页面底部。最简单的方法是创建一个“粘脚”，但在Rooster要求的轨迹上，你需要将它始终放在底部。我唯一能想到的另一个选择是使用大量的JavaScript。如果您从
index.html
中取出footer div，并在
home
和
profile
模板中同时添加footer.div元素，这是否达到了您的目的@公鸡这是我最初的解决方案，但它看起来不太好。我想我唯一的选择是JS。让页脚总是卡在页面底部可以吗？另外，动画中的div高度是否总是一样的？不，这是我面临的问题，页脚不应该粘在页面底部。最简单的方法是创建一个“粘脚”，但在Rooster要求的轨迹上，你需要将它始终放在底部。我唯一能想到的另一个选择是使用大量的JavaScript。如果您从
index.html
中取出footer div，并在
home
和
profile
模板中同时添加footer.div元素，这是否达到了您的目的@公鸡这是我最初的解决方案，但它看起来不太好。我想我唯一的选择是JS。
.view-container {
  position:relative;
}
.view-container > .view.ng-animate {
  position:absolute; // when animated make absolute
  top:0;
  left:0;
  width:100%;
  min-height:500px;
}