CSS笔记-如何让带阴影盒子占满整个区域且不出现滚动条

在使用elementUI的card时候，发现如果内容高度设置了100%，虽然会全部撑开card盒子，但是下阴影会超出整个区域高度，导致出现滚动条，
可以为内容设置calc(100% - 阴影尺寸)，但是兼容性可能会有欠缺，
所以我们使用一个万金油方法：
position:absolute
我们知道如果想上下左右居中一个盒子，

.center-box{
   postion:absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
   width:100px;
   height:100px;
   background-color:red;
}

可见，如果设置宽高，上下左右都设置为0，这个盒子就上下左右居中了；

然而，这个如果不设置宽高，就铺满整个页面了，
我们还可以设置偏移量来让盒子周围和区域有间隙：

.shadow-box{
  position: absolute;
  left: 10px;
  top: 5px;
  right: 10px;
  bottom: 5px;
}

这样就把shadow-box铺开并且给阴影留出空间显示了！