Angular2設定的高度，以全屏幕

我想設置一個div到全屏幕angular2模板Angular2設定的高度，以全屏幕

我已經試過這林我的HTML模板

<div class="auth-container"> 

</div>

在trhe CSS

.auth-container{ 
    height: 100%; //also tried with min-height 
    background-image: url("assets/images/backgroundimage.jpg"); 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

}

該圖像延伸到全屏，但它的頁面heig切斷HT如圖下面的屏幕截圖

手動設置高度類似

height:550px;

伸展到全屏幕，但它在不同的屏幕沒有響應尺寸

我需要做什麼來設定擴展高度最大

來源

2017-08-02 GEOFFREY MWANGI

這個問題是關於角？ – Sreemat

這與HTML和CSS無關，只是使用角模板 – Sreemat

使用可以使用vh（視高度）和vw（視口寬度）長度單位拉伸到全部可用屏幕大小：

.auth-container { 
    height: 100vh; 
    width: 100vw; 
}

編輯 - 說明：通過使用上高度的CSS長度單位％，指定相對於它的父母高度div的高度。因此，如果直接父母（例如）具有比視口更小的高度，則它是不夠的。只有將所有祖先元素（html，body，...，.auth-container）設置爲100％時，它才能以這種方式工作。

來源

2017-08-02 06:56:12 MattDiMu

感謝此工程 –

你可以利用VH和VW單位，所以，

height: 100vh 
width: 100vw

這裏有一些很好的跟進讀取經過這種方法的優點和缺點https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

來源

2017-08-02 07:01:43

儘管此鏈接可能回答此問題，但最好在此處包含答案的重要部分並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/16905945） –

如果你想顯示頂部

background-position-y: 0;

由於使用了遮蓋屬性，它會切斷您背景的一部分。

也background-size: 100% 100%;爲響應的全面形象。

來源

2017-08-02 07:10:27 Hash

Angular2設定的高度，以全屏幕

回答

相關問題