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

时间:2019-05-24 07:07:22

标签: css angular angular-material

我正在将背景图片应用于我的页面。背景图片位于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;
}

1 个答案:

答案 0 :(得分:0)

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

  • 您正在使用的材料具有其样式组件的方式,请尝试查看材料文档material grid或使用一些框架,因为尝试的方式混合样式不是一个好方法想法。

  • 调整图像大小不是一个好习惯,当高度或宽度增加时,质量会下降。