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;

伸展到全屏幕，但它在不同的屏幕没有响应尺寸

我需要做什么来设定扩展高度最大

这个问题是关于角？ – Sreemat

这与HTML和CSS无关，只是使用角模板 – Sreemat

答

使用可以使用vh（视高度）和vw（视口宽度）长度单位拉伸到全部可用屏幕大小：

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

编辑 - 说明：通过使用上高度的CSS长度单位％，指定相对于它的父母高度div的高度。因此，如果直接父母（例如）具有比视口更小的高度，则它是不够的。只有将所有祖先元素（html，body，...，.auth-container）设置为100％时，它才能以这种方式工作。

感谢此工程 –

答

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

height: 100vh 
width: 100vw

这里有一些很好的跟进读取经过这种方法的优点和缺点https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

尽管此链接可能回答此问题，但最好在此处包含答案的重要部分并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/16905945） –

答

如果你想显示顶部

background-position-y: 0;

由于使用了遮盖属性，它会切断您背景的一部分。

也background-size: 100% 100%;为响应的全面形象。

Angular2设定的高度，以全屏幕

相关推荐