Vue容器布局铺满全屏

最新推荐文章于 2024-07-09 20:43:28 发布

何进业

最新推荐文章于 2024-07-09 20:43:28 发布

阅读量4.2k

点赞数 6

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45138601/article/details/117575249

版权

这篇博客介绍了如何在 Vue 项目的 App.vue 文件中设置全局样式，确保组件从根节点开始占据整个屏幕。通过设置 #app 样式，将应用定位为绝对定位并填充整个视口。接着，在组件层级中，针对 .index 和 .el-container 类应用样式，消除内边距和外边距，并保持100%的高度，以实现页面内容的全屏布局。

摘要由CSDN通过智能技术生成

在App.vue中设置样式。

<style>
    #app {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

然后在容器文件中最外层设置<div>

最后设置样式。

    .index {
        padding: 0px;
        margin: 0px;
        height: 100%;
    }
    .el-container {
        height: 100%;
    }

何进业

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
Vue容器布局铺满全屏

在App.vue中设置样式。<style> #app { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>然后在容器文件中最外层设置<div>最后设置样式。 .index { padding: 0px; margi
复制链接

扫一扫