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%。

我迄今为止设法做的最好的事情是将内联样式添加到body index.html的{{1}}标记，其中height:100vh将页脚设置在底部，但随后当内容拉伸应用程序的高度时[例如，带有许多选项的下拉列表]，页脚将内容分成两半但仍然不会粘在页面底部。

要添加的其他内容，我们的样式通过整个应用的main.css样式表添加，因此组件没有其他样式文件。

Angular必须添加一些我无法控制的东西。我们的图形设计师提供的相同html页面在相同的浏览器和页脚工作中打开时具有完全相同的CSS样式。

编辑：仍在调查此问题。看起来这个组件将我们的页面进一步扩展到了页脚最初的位置，在某种程度上保留在后台，所以页脚没有被推到＆＃39;在那下面。我们无法预测该组件的长度，因为它填充了从BE获取的数据。

Answer 1

结果显示页脚下剩余的组件在其css类中具有float属性。我们通过在这些组件的包装器中添加group类来解决该问题：

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

角度4应用程序不会填充屏幕高度

1 个答案: