Question

我正在构建一个经常使用嵌套视图的角度应用程序。但是，某些视图比页面上的其他元素高，最终延伸到父视图的末尾。

我使用Ryan Fait's Sticky Footer所以我有一个包含div设置为height:100%的包装器，我希望页面能够适应并将页脚移动到嵌套的底部但是，我看到页脚border和background-color的样式元素保留在父div的末尾，而页脚的内容被推送到嵌套div的末尾。

包含图片，因为我正在努力使语言准确无误：

我真的在寻找任何解决方案，从将css修复到像某些页面更改页脚或使用ng-if / ng-class这样看起来更黑的东西。我想象我对CSS / UI-Router有些误解，但我无法真正跟踪它。

代码并不是很有趣，但就是这样吗？

CODE

＆＃13;

.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.push {
  height: 50px;
}
.footer {
  display: block;
  height: 50px;
}
.nested {
  max-height: 500px;
}

＆＃13;

<body>
  <div class="wrapper">
    <div>
      <h1>Some text</h1>
      <ui-view class="nested"></ui-view>
    </div>
    <div class="push"></div>
  </div>
  <footer class="footer">
    <span>some copy</span>
  </footer>
</body>

＆＃13;

Answer 1

如果使用高度的百分比值（即相对高度），则还必须定义父元素高度。在你的情况下，你还需要height: 100% on body和html，比如

html, body {
  height: 100%;
}

UI-Router：高度：100％在body元素上忽略嵌套视图高度

1 个答案: