角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應用程序不填滿屏幕高度

回答

相關問題