element-ui+vue中el-container铺满布局

幸思无声_东莞

已于 2022-11-09 12:09:20 修改

阅读量2.4k

点赞数 2

文章标签： vue.js javascript 前端

于 2022-11-09 11:28:07 首次发布

本文链接：https://blog.csdn.net/qq_45083002/article/details/127764415

版权

第一步铺满全屏

样式添加

html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }

第二部头部内容铺满


```javascript
<el-header style="--el-header-padding: 0 0px"><HeadNavigationVue></HeadNavigationVue></el-header>

在这里插入图片描述

第三部宽度自适应高度铺满

html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100vh;
    }
  .el-aside{
    height: 100%;
    background-color: #d3dce6;
  }