html - angular 4 应用程序不填满屏幕高度

Question

我的app.component是这样的:

<div class="wrapper">
  <app-header></app-header>
  <router-outlet></router-outlet>
  <footer>
    <section class="page group">
      {{ 'COMPANY.address' | translate }}
    </section>
  </footer>
</div>

但是我的页脚不在页面底部。

wrapper 类有 min-height:100%。

到目前为止，我设法做的最好的事情是将内联样式添加到 index.html 的 body 标记中，其中包含 height:100vh 将页脚设置在底部，但是当内容拉伸(stretch)应用程序的高度时 [例如带有许多选项的下拉菜单] 页脚将内容分成两半并且仍然不会粘在页面底部。

还有一点要补充，我们的样式是通过整个应用程序的 main.css 样式表添加的，因此组件没有单独的其他样式文件。

Angular 一定是在添加一些我无法控制的东西。我们的图形设计师提供的相同 html 页面在相同的浏览器和页脚作品中以完全相同的 css 样式打开。

编辑:仍在调查这个问题。似乎将我们的页面扩展到比页脚最初所在的位置更下方的组件，以某种方式留在后台，因此页脚不会被“推”到其下方。我们无法预测该组件将持续多长时间，因为它填充了从 BE 获取的数据。

Answer 1

原来留在页脚下的组件在它们的 css 类中有一个 float 属性。我们通过向这些组件的包装器添加一个 group 类来解决这个问题:

body .group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}