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 class 有 min-height:100%.

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

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

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

编辑：仍在调查此问题。似乎将我们的页面扩展到比页脚最初所在的位置更下方的组件，以某种方式停留在后台，因此页脚不会低于 'pushed'。我们无法预测该组件的长度，因为它填充了从 BE 获取的数据。

Answer 1

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

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

angular 4 个应用未填满屏幕高度

angular 4 app doesn't fill screen height

html

css

footer

angular