css中高度设置百分比但是没有效果

当我们给块级元素高度的时候，往往没能看到效果。 

.login-card {
  width: 100%;
  height: 100%;
}

原因是百分比的大小是相对其父级元素宽高的大小，最外层元素设置的百分比是对应屏幕而言的。 若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式！！！

解决办法：

使用基于视图窗口的单位 vw，vh

• vw:1vw 等于视口宽度的1%
• vh:1vh 等于视口高度的1%
• vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
• vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

 

.login-card {
  width: 100px;
  height: 100vh;
}