角4应用程序不填满屏幕高度
问题描述:
我app.component
是这样的:角4应用程序不填满屏幕高度
<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
的body
标签的index.html
这台页脚底部,但是当内容被拉伸的应用[例如与高度一个包含多个选项的下拉列表]页脚将内容分成两半,但仍然不会粘在页面的底部。
需要添加的东西,我们的样式通过main.css
样式表添加到整个应用程序中,所以组件中没有其他样式文件单独存在。
Angular必须添加一些我不能控制的东西。我们的图形设计师提供的相同的html页面在相同的浏览器和页脚作品中以完全相同的css样式打开。
编辑:仍在调查这个问题。看起来像是页面进一步延伸的页面比页脚最初的页面更靠后,因此页脚不会被“推到”下面。我们无法预测该组件将会有多长时间,因为它是由从BE获取的数据填充的。
答
原来在页脚下剩余的组件在它们的css类中有float
属性。 我们通过添加group
类对这些组件的封装解决了该问题:
body .group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
你检查与F12工具浏览器中呈现的页面?它允许您查看应用于每个元素的样式并与它们一起玩耍。您可以尝试并找到给您正确布局的样式属性。 – ConnorsFan
是的,我做过了,它们*与示例html页面和应用程序视图完全相同!我们将尝试更多的工作,直到那时我们将坚持'height:100vh'解决方案,因为它是一些下拉框架的叠加,与页脚一起混乱。内容本身是可以的。不是最好的解决方案,但确定。 – gkri