vue通过calc计算高度铺满页面时,存在垂直滚动条_vue cal高度

在Vue 中使用el-container时,布局为上下布局,即存在一个el-header和el-main标签,header高度为60px,main高度为calc(100vh - 60px),按照如此设计,header的高度加上卖弄的高度应该正好铺满整个屏幕,但是在我的实际显示中却出现了垂直下拉框.
我的代码和现象如下:
1
2

我不能明白为什么会出现这种情况,直到我搜了一下Vue的资料,然后才发现Vue渲染的body 默认margin:8px,然后我将index.html 中将body的margin覆盖成0.
1

然后,我再在el-main里面创建新的container时,发现又有了滚动条.在观察源文件的样式时,发现el-mian的padding不为0,接着再将el-main的padding设置为0.
1

Vue的默认App.vue 中#app的样式中margin-top: 60px;也会影响到样式,要注意一下.