Question

我正在将背景图片应用于我的页面。背景图片位于div元素内部，但div元素未占用100％的浏览器高度。虽然，body，html和div的所有高度都设置为100％。

我也尝试过最小高度：100vh，但是不起作用。

下面是login.css的代码

global styles.css

.corporate {
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background: url("../../../assets/login-new.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
  margin-top: 5rem;
  width: 30vw;
  height: 75vh;
  opacity: 0.9;
}

html文件：

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
@import "~@angular/material/prebuilt-themes/indigo-pink.css";


html, body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  font-size: 16px;
  color: #222;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  max-width: 100%;
  /* min-height: 100%; */
  height: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

Answer 1

100％是指父级，因此在这种情况下为div，因此您的图片占据了div高度的100％，并且div的高度由其内容决定。

您正在使用的材料具有其样式组件的方式，请尝试查看材料文档material grid或使用一些框架，因为尝试的方式混合样式不是一个好方法想法。
调整图像大小不是一个好习惯，当高度或宽度增加时，质量会下降。

div不占用浏览器高度的100％

1 个答案: