我的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%
。
到目前为止,我所做的最好的事情是用height:100vh
在index.html
的body
标签中添加内联样式,它在底部设置页脚,但是当内容拉伸应用程序的高度时,例如使用具有许多选项的下拉列表,页脚会将内容一分为二,仍然不会停留在页面的底部。
另外,我们的样式是通过整个应用程序的main.css
样式表添加的,因此没有单独用于组件的其他样式文件。
Angular肯定添加了一些我无法控制的东西。由我们的图形设计师提供的相同的html页面在相同的浏览器和页脚工程中以完全相同的css样式打开。
编辑:仍在调查此问题。似乎将页面扩展到比页脚最初所在的位置更远的组件,以某种方式留在了后台,因此页脚不会被“推”到下面。我们无法预测该组件将持续多长时间,因为它填充了从BE获取的数据。
发布于 2017-10-05 11:51:05
原来留在页脚下的组件在它们的css类中有一个float
属性。我们通过将group
类添加到这些组件的包装器中修复了此问题:
body .group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
https://stackoverflow.com/questions/45330700
复制相似问题