Angular2将高度设置为全屏

Question

我想在angular2模板中将div设置为全屏

我试过这个 我是我的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;

}

图像延伸到全屏但是被页面高度切断，如下面的屏幕截图所示

手动设置高度，如

height:550px;

拉伸到全屏，但在不同屏幕尺寸下无响应

我需要设置什么才能将高度扩展到最大值

Answer 1

使用可以使用vh（视口高度）和vw（视口宽度）长度单位来拉伸到完整的可用屏幕尺寸：

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

edit - 说明：通过使用高度上的css长度单位％，指定div相对于其父高度的高度。因此，如果直接父节点（例如）的高度小于视口的高度，则它是不够的。只有当你将所有祖先元素（html，body，...，。auth-container）设置为高度100％时，它才会这样工作。

Answer 2

你可以使用vh和vw单位，所以，

height: 100vh 
width: 100vw

这里有一些很好的后续阅读，其中介绍了这种方法的优点和缺点https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Answer 3

如果您想要显示图像的顶部，只需使用

background-position-y: 0;

由于使用封面属性，它会切断背景的一部分。

还background-size: 100% 100%;以获得完整的图片并具有响应性。