怎样设置元素的大小与浏览器窗口大小相同

如果有一个类名为.box元素想充满整个屏幕，那么怎样设置呢？
在这里总结了三种方法来进行设置：

• 方法一：使用%来设置，所有基于百分比的尺寸必须从父元素继承，并且如果任一父项未能指定尺寸，则它们的尺寸假定为0px。所以想继承父元素的高度，则需要先设置父容器的高度，即要先将html、body的高度设为height:100%，后将.box的高度设为height:100%

html, body, .box {
  height:100%;
}

• 方法二：使用vw,vh来设置 ：

 .box {
   width: 100vw;
   height: 100vh;
 }

• 方法三：使用定位position:absolute来实现(此时.box的父元素应为body)

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

转载至：https://www.jianshu.com/p/5c731b782f5e