html - Angular2 设置高度为全屏

Question

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

这个我试过了我是我的 html 模板

<div class="auth-container">

</div>

在 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;

图像拉伸(stretch)到全屏，但被页面高度截断，如下面的屏幕截图所示

像手动设置高度

height:550px;

拉伸(stretch)到全屏但在不同的屏幕尺寸下没有响应

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

Answer 1

使用可以使用vh(viewport-height)和vw(viewport-width)长度单位来拉伸(stretch)到整个可用屏幕尺寸:

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

edit - 说明:通过在高度上使用 css 长度单位 %，您可以指定 div 相对于其父项高度的高度。因此，如果直接父级(例如)的高度小于视口(viewport)，则它是不够的。仅当您将所有祖先元素(html、body、...、.auth-container)设置为 100% 高度时，它才会以这种方式工作。