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

原创已于 2023-02-03 21:24:36 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #css

于 2023-02-03 21:20:58 首次发布

vue 专栏收录该内容

1 篇文章

订阅专栏

在Vue项目中使用el-header和el-main进行上下布局时，由于Vue默认bodymargin和el-main的padding导致滚动条出现。通过设置body的margin为0和el-main的padding为0，以及注意App.vue中的margin-top，可以消除不必要的滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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