el-container布局不正常

最新推荐文章于 2024-06-02 15:10:46 发布
最新推荐文章于 2024-06-02 15:10:46 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Element UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjh01/article/details/104101255
版权

按照官方文档直接复制过来，发现head和aside、main、foot在同一行
问题排查
查了下官网的文档，发现这样一项说明
微信截图_20191020111230.png
分析原因是：将head、aside、main、foot封装成了独立组件，封装成组件后，el-container中没有了el-footer和el-header，导致子元素排列方向默认为horizontal
问题解决
在el-container上增加 direction="vertical"属性

xjh01
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element中el-container容器与div布局区分详解
10-15
主要介绍了element中el-container容器与div布局区分详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决element-ui中container容器布局的问题
热门推荐
Charis--Cai
06-21 1万+
根据项目需求，我要得是这种效果： 根据官方文档，代码如下： <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>...
Vue中引入elementUI中的container组件失效
最新发布
weixin_42171832的博客
06-02 366
1.不用修改官网中任何css或者html。2.按需引入，不是只是引入官网的就可以。
＜el-container＞：封装header布局出错
m0_55016911的博客
04-20 289
解决：发现不封装导航栏就不会有这个问题，于是F12查看了两者界面的差别，发现不封装的情况下，最外层的有一个叫“is-vertical”的class，于是在代码内加上。查看官方文档，找到如下属性介绍。个人猜测封装后el-container的direction不知道子元素有el-header，导致默认值为horizontal。el-header被我封装在navbar中，然后router-view路由跳转展示el-main和el-aside的内容，布局结构如下。
Vue3使用elementUI Plus中的el-container布局容器时不能撑开页面的解决方案
qq_61567032的博客
08-25 3948
使用el-container让Aside、Main、Header等部分充满屏幕的解决办法
el-container 实践上的布局问题
denghut882925的博客
12-28 682
当自己利用element-ui上面的例子来实现整体布局的时候， 就是自己分开成单独的vue组件时，发现布局是不对的，效果是这样的： 代码是这样的，代码一模一样，只是拆开了各个组件，如下图： 后来发现是这个问题，当你拆开后，el-container容器不知道子元素中是否有el-header或el-footer， 答案在这里 完善答案如图: ...
解决element-ui Container布局的顶部及侧边栏菜单固定，右侧main内容滑动
qq_51219034的博客
06-16 1376
注意el-aside收起的时候我之前写的是200px但是收起的时候会有空白，我就改为auto让他自适应，并且要在template的部分去行内书写，我在css部分写不生效。我的页面布局是用的这种。
elementPlus 使用container布局容器不当导致内容不加载，无效，不显示
m0_62170162的博客
04-18 803
el-aside等子组件必须以el-container为亲元素，即使是把el-aside放在子路由组件，然后再引入也不行。
Element-UI 使用el-row 分栏布局的教程
01-18
使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理， 代码如下 <el gutter=20 class=el-row type=flex> <el span=8 xss=...
vue+element-ui使用
01-06
对于布局方面，Element UI 提供了栅格系统（`el-col` 和 `el-row`），这有助于实现响应式布局。例如： ```html <div class="container"> <el-row> <el-col :span="6">左侧内容</el-col> <el-col :span="18">...
bootstrap-scrollbars:Bootstrap教程项目
05-07
在默认情况下，浏览器自身的滚动条设计较为简单，不够美观，与Bootstrap的现代设计风格可能不匹配。通过这个插件，开发者可以轻松地将滚动条样式调整为与Bootstrap主题一致，提升页面的整体视觉效果。 首先，我们来...
elementUI el-container水平布局问题
weixin_44214489的博客
05-27 171
踩坑记录
el-container布局不正常、el-header与el-aside与el-main分离并各个封装成组件并引用解决方法
weixin_45917610的博客
10-22 1928
我做毕设时候后台使用elemnt框架，直接去官网上获取他的代码：但是他们是一个界面的方式，而不是自己需要的模板，或者各个封装成组件，做成公共组件。 官网链接：链接: https://element-plus.gitee.io/zh-CN/component/container.html#%E4%BE%8B%E5%AD%90. 现在做成顶部导航（通过官网提供的代码，我们提取出来）： 左侧导航： 引用并与主体使用 效果：大概思路就是这样，必要的样式我还没太多修改，毕竟是毕设，样式不可能这么别致。不能说人家
elementUI container布局不生效解决办法
Sys_菜菜
06-21 1万+
大晚上的查这个查了半个多小时，不行我一定要写博客把这个坑记录下。 <el-container direction="vertical"> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</e
vue组件使用elementUI-Container 布局容器的时候布局问题
Moria
06-06 8467
参考elementUI官方文档在vue组件使用Container 布局容器的时候，怎么设置都是水平布局，后来经 参考： https://www.cnblogs.com/ertingbo/p/8135391.html 文章了解到原来官方文档最下面 参数 说明 类型 可选值 默认值 direction 子元素的排列方向 string horizontal / vertical 子元...
element-ui组件使用遇到更改组件样式无效
qq_44850230的博客
11-21 1293
给组件设置样式无效-----轮播图 <!-- 轮播图 --> <el-container class="lbt" direction="horizontal"> <el-carousel :interval="5000" arrow="always"> <el-carousel-item v-for="item in 4" :key="item"> <div class="lbtimg">.
container布局容器 [ElementUI]
m0_57001006的博客
07-18 1969
使用el-container组件创建布局容器。
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布局组件的设置，可以很方便地实现页面的全屏布局，使得网站的响应式设计更加完美，用户体验更加优秀。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值