角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获取的数据填充的。

来源

2017-07-26 gkri

你检查与F12工具浏览器中呈现的页面？它允许您查看应用于每个元素的样式并与它们一起玩耍。您可以尝试并找到给您正确布局的样式属性。 – ConnorsFan

是的，我做过了，它们*与示例html页面和应用程序视图完全相同！我们将尝试更多的工作，直到那时我们将坚持'height：100vh'解决方案，因为它是一些下拉框架的叠加，与页脚一起混乱。内容本身是可以的。不是最好的解决方案，但确定。 – gkri

原来在页脚下剩余的组件在它们的css类中有float属性。我们通过添加group类对这些组件的封装解决了该问题：

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

来源

2017-10-05 11:51:04 gkri

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

回答

相关问题