elementUI的container布局设置全屏宽度

最新推荐文章于 2024-05-13 17:05:45 发布
最新推荐文章于 2024-05-13 17:05:45 发布
阅读量1.4w 收藏 8
点赞数 3
分类专栏： element项目问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Start2019/article/details/99974967
版权

进用element UI的 container 布局，发现不能全屏铺满
在这里插入图片描述
在这里插入图片描述
添加了一行代码：

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

发现高度占满全屏，但是宽度还没有 在这里插入图片描述
继续给 html,body加了 width：100%；还是没有任何变化，后面发现在这个容器外面被一个 div 包裹着。 在这里插入图片描述
在公共样式中加了一行 #app>div[data-v-23246054]{width:100%;} ，最后终于实现了想要的效果。
在这里插入图片描述

Start2019
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element布局容器大小_让Element-ui的Container布局容器高度百分百显示
weixin_33110431的博客
01-17 2603
使用Element(2.13.1版本)的Container布局容器布局，按照官网的代码运行后不能撑开整个页面，只能显示一段高度，代码如下：HeaderleftMain那如何让它高度百分百显示呢？给html、body、#app及最外层.el-container的height设置100%即可。index.html：demo1html,body {margin: 0;height: 100%;}app....
duilib库Container布局demo
05-22
在这个"duilib库Container布局demo"中，我们将深入探讨Container布局的概念、用法以及如何在实际项目中应用。 Container布局是Duilib库中的一个重要组成部分，它允许开发者将多个控件组织在一个容器内，并按照特定...
element的container布局铺满
龙门变化人皆望，莺谷飞鸣自有时
12-23 2206
element的container布局默认不铺满全屏，需要在类中添加属性。 <template> <el-container class="el-container"> <el-header>Header</el-header> <el-container> <el-aside style="width: 200px">Aside</el-aside> <el
element-ui+vue中el-container铺满布局
qq_45083002的博客
11-09 2416
【代码】element-ui+vue中el-container铺满布局。
简单实现elementui的el-container布满全屏
最新发布
m0_64889685的博客
05-13 395
这里有一大块的留白只需要改成以下内容即可解决，给底层的el-container设置一个高度。element ui提供的container模块没有设置高度效果会导致以下效果。
divcss布局模板代码_Element-UI 技术揭秘—Container 布局容器组件的设计与实现
weixin_39771969的博客
11-19 585
前言上一篇文章我们分析了 Layout 布局组件的设计和实现，它的应用场景通常是局部布局。对于整个页面的布局，element-ui 提供了 Container 布局容器组件，专门用于 PC 管理后台页面的整体布局。需求分析我们先通过几幅图看一下页面的常见布局。这两张图的布局在后台系统中很常见，通过简单的 CSS 就可以实现。不过我们更喜欢用组件化的开发方式，把这些 CSS 的细节封装到组件里，如下...
element布局容器大小_Vue Element-Ui Container 布局容器
weixin_36273006的博客
02-06 1412
学习vue+elementUi 在 初步学习布局 不知道为什么 有margin谢谢各位大佬代码如下：HeaderAsideMain.el-header,.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #d3dce...
使ElementUI的Container布局容器布满全屏
热门推荐
Laputa219的博客
06-24 1万+
问题：引用官网例子，布局只占一半，定义固定像素高度又不好适用不同屏幕大小效果。 解决 1.app.vue中加一下样式 <style> #app { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> 2.布局组件中.el-aside样式加上 line-height: 100vh; vh是相对于屏幕的可见高度，视口被均分为100单位的vh
Firefox下样式设置宽度奇怪现象
10-30
Firefox下样式设置宽度奇怪现象解决方案 Firefox浏览器在处理CSS样式时，存在一些奇怪的现象，特别是在设置宽度时。今天，我们来讨论一个关于Firefox下样式设置宽度奇怪现象的解决方案。 问题描述 在项目中，我们...
element中el-container容器与div布局区分详解
10-15
在Element UI框架中，`el-container` 是一个用于布局的组件，它提供了更方便的方式来构建页面的基本结构。相比普通的HTML `div` 元素，`el-container` 提供了更强大的布局管理功能，特别是对于复杂页面布局的需求。...
ElementUI 登录页
06-17
模板部分会使用 ElementUI 的组件来布局和设计登录表单，例如： ```html <div class="login-container"> 账号" prop="username"> <el-input v-model="form.username" auto-complete="off"></el-input> ...
条件格式设置-container.twbx
07-23
Tableau实现excel样式的条件格式设置
Element-ui表格自适应宽度
lzzw的学习之路
03-31 4995
<el-table-column label="#" prop="id" align="center" :width="flexColumnWidth('id',tableList)"/> roleList: 为数据数组； merchantNo:为当前列的字段； 注：以下代码中是直接读取tableData[ i ][ str ]，如果str不在第一层，则需要自行改写 如table[ i ].data[ str ] flexColumnWidth(str, tableData...
采用element-ui中的Container 布局容器如何调整的后台管理系统的页面逻辑
qq_43351249的博客
12-31 388
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width='device-width', initial-scale=1.0"> <title>Document
elementui表格宽度自适应
weixin_43971142的博客
04-29 1789
elementui表格宽度自适应
ElementUI 布局容器Container
爱喝水的qdy的博客
11-18 3565
目录官方地址布局容器组件常见布局测试用的CSS样式常见布局1常见布局2常见布局3常见布局3常见布局4常见布局5常见布局6实例templatestylejsel-container 属性el-header 属性el-footer 属性el-aside 属性 官方地址 https://element.eleme.io/#/zh-CN/component/container 布局容器组件 布局容器组件采...
百分比单位始终根据父元素相应值来计算_CSS Viewport 单位，很多人还不知道使用它来快速布局...
weixin_39932762的博客
11-29 602
**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。在本文中，我们将学习 CSS Viewport units(视口单位)以及如何使用它们，并用列举一些常见问题及其解决方案和用例，让我们开始吧。...
element ui 对话框设置固定宽度
笔记、经验、日常分享
03-10 7347
宽度设置width属性，默认是百分比，如 width="30",表示宽度为 其父元素宽的 30%; 想给固定宽度，使用v-bind指令，加上px单位即可 :width="'300px'"，注意蛋引号。 <el-dialog title="提示" :visible.sync="dialogVisible" :width="'300px'" :before-close="handleClose"> <span>这是一段信息</span> <
el-container布局布满全屏
06-28
### 回答1： 要让el-container布局布满全屏，可以在其父元素上设置height: 100%和width: 100%，同时在el-container上设置height: 100%和width: 100%。这样就可以让el-container布局充满整个屏幕。 ### 回答2： el-container是一个常用的布局组件，在element UI中提供了很多方便的功能。如果要让el-container布局布满全屏，可以通过以下方式实现： 1. 设置el-container的高度为100vh。vh是视口高度单位，设置为100表示整个屏幕高度，因此el-container的高度就会占满整个屏幕。 2. 使用flex布局，将el-container的flex属性设置为1。这样el-container会自动填满剩余的空间，从而实现布局全屏。 3. 如果el-container的上下左右边距已经为0，那么它就是撑满整个屏幕的。 4. 最后就是针对不同的viewport大小进行响应式布局。 总之，通过一些简单的css样式设置，就可以让el-container布局布满全屏，从而让页面更加美观、自然。关键是我们要熟练掌握element UI框架和css样式的使用技巧，这样才能更好地实现我们想要的布局效果。 ### 回答3： el-container布局是一款简单、易用且高效的页面布局组件，可用于创建全屏布局。借助el-container，您可以轻松地创建一个完整的布局，包括头部、内容和页脚等部分。最重要的是，el-container布局可以完全占满整个屏幕，帮助您实现网站的响应式设计，同时也可以应用于移动端的页面设计。 要让el-container布局完全占满屏幕，可以采用以下步骤： 1. 首先，在您的Vue组件中引入el-container组件，并在template中书写el-container布局 ```html <template> <el-container> <!-- 您的页面内容 --> </el-container> </template> ``` 2. 在样式表中使用CSS对el-container进行布局，包括设置宽度和高度以及定位属性等。 ``` css html,body{ height:100%; width:100%; overflow-y:auto; margin:0; padding:0; } .el-container{ height:100%; width:100%; position:absolute; left:0; top:0; } ``` 在这段代码中，我们对html和body元素进行了一些基础样式的设置，确保页面布局可以完全占满屏幕。随后，我们对el-container类进行了样式设置，其中使用了绝对定位，将el-container组件固定在页面的左上角，然后设置height和width为100%，这样el-container布局就可以完全占满屏幕了。 3. 最后，在组件中添加其他的el组件，比如el-header、el-aside、el-main和el-footer，根据需求进行布局排版即可。 总的来说，借助el-container布局组件的设置，可以很方便地实现页面的全屏布局，使得网站的响应式设计更加完美，用户体验更加优秀。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值