Element Plus Container布局容器设置height: 100%无效

最新推荐文章于 2024-06-28 14:22:47 发布
最新推荐文章于 2024-06-28 14:22:47 发布
阅读量4.5k 收藏 6
点赞数 3
分类专栏： 前端 文章标签： vue.js javascript
原文链接：https://blog.csdn.net/zengzenghaha/article/details/83018605
版权
Element Plus Container布局容器设置height: 100%无效

一、在el-container中设置高度无效

  1. 设置高度，el-container高度等于父元素#app的高度，#app的高度的父节点是body，body的父节点是html,默认情况下html和body的高度为auto,浏览器不会自动给标签添加高度，因此自然就无效了

二、解决

  1. 在App.vue中添加
html,body,#app{
  height: 100%
}

然后在el-container中添加height

转 载 ： \color{#FF00FF}{转载：} 转载：
https://blog.csdn.net/zengzenghaha/article/details/83018605

「已注销」
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Element UI 修改样式不生效（例如修改树形控件节点高度）
Jacy_Lee_LDF的博客
08-07 2514
很多时候 Element UI 组件自带的样式不是我想要的，通过检查元素获取到组件的 class 名称，在style里面去重写，比如树形控件的节点高度，结果发现不起作用，这个问题困扰了我好几天，真的好几天，连百度相关词条都有，硬是找不到解决办法，今天也不知道哪根筋搭对了，我把 样式标签 <style scoped></style> 里面的 scoped 去掉，样式就生效了。 <style scoped> </style> ==> <style.
ElementUI：el-container实现高度占满
热门推荐
KaiSarH
11-30 1万+
el-container实现高度占满
【ElementPlus源码】Container 布局容器
最新发布
karshey的博客
06-28 913
返回了一个对象ElContainer ，有一个install方法，若调用install方法，则将Container、Aside、Footer、Header、Main五个组件注册到app上，并可以通过ElContainer.Container的方法访问Container。在许多编程语言和环境中，它通常被用作一个占位符函数，当你需要一个函数但又不希望它做任何事情时，可以使用NOOP。若没有props.direction，判断插槽中是否有header和footer，有则返回true，代表垂直。
element-ui height:100%不生效解决方案
qq_52822043的博客
05-06 3560
在使用element-ui组件时，想要侧边栏的高度占满屏幕的左侧边栏，单纯在样式中设置了height:100%，然而并不生效。 .el-menu { height: 100%; border: none; h3 { color: #fff; text-align: center; line-height: 48px; } } 解决方案： 当想要元素铺满整个屏幕的时候，采用绝对定位或者固定定位 定位+width：100%
Element Container布局容器百分之百显示
DoubleInjured的博客
08-14 775
Element Container布局容器百分之百显示
设置组件高度100%不生效问题
qq_20411471的博客
07-10 1363
有时我们设置组件的高度为100%，结果设置之后发现高度并不是100%,比如下图，我们可以看到在此处container设置了100%的高度，但是并没有生效。 这是因为class="container"的这个组件虽然height设置成100%的高度，但是100%，是相对于父元素的100%，因此我们需要再设置page元素的height为100%，才能保证container设置的100%height生效，如下图： ...
element中el-container容器与div布局区分详解
10-15
在Element UI框架中，`el-container` 是一个用于布局的组件，它提供了更方便的方式来构建页面的基本结构。相比普通的HTML `div` 元素，`el-container` 提供了更强大的布局管理功能，特别是对于复杂页面布局的需求。...
CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body).pdf
12-16
总之，解决CSS设置元素`width: 100%`在`body`作为父元素时失效的方法包括：清除父元素（如`body`）的默认样式，使用JavaScript动态设置宽度，或者结合媒体查询实现响应式布局。每种方法都有其适用场景，开发者应根据...
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
元素加管理员 基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 ...$ cd element-plus-admin $ npm install pnpm -g $ pnpm install $ pnpm run serve
element-plus离线文档
05-07
Element Plus 的文档详细介绍了每个组件的功能、用法、属性、事件和槽等内容，涵盖了布局、表单、按钮、表格、通知、弹出框等常见的前端元素。在使用 Element Plus 构建项目时，这些文档是开发者的重要参考资料。 ...
微信小程序设置百分比无效 height: 100%
weixin_43663349的博客
05-05 3210
想要实现效果：container容器下两个子容器在页面垂直1：1 代码 <view class="container"> <view class="view1">1</view> <view>2</view> </view> .container{ display: flex; flex-direction: column; height: 100%; } .container view{ flex: 1;.
el框架侧边栏导航栏向下拉满(简单Demo+为什么你的height:100%无用)
weixin_45969142的博客
03-09 540
1.前言 首先说明一下为什么height: 100%没有用 推荐博客：https://blog.csdn.net/yanchenxi313761/article/details/79437541 讲的很详细的，大家可以好好理解一下。 2.App.vue 这里用了路由，如果不懂路由的可以看我的这篇文章： https://blog.csdn.net/weixin_45969142/article/details/112012259 <template> <div id="app
关于 vue element-ui布局容器不能占满全屏
m0_50292146的博客
09-21 913
发现设置最外层的el-container 高度100%或者100vh都没效果。最近在做一个后台管理系统，使用的element-ui布局。最后发现在App.vue的样式加上这两行代码就行了。
解决Element-Plus使用了布局容器后，侧边栏高度设置100%却没有撑开高度
weixin_61769998的博客
10-18 2149
解决Element-Plus使用了布局容器后，侧边栏高度设置100%却没有撑开高度
解决element ui无法修改height和padding
drhnb的博客
07-17 2764
当我使用element ui的布局容器组件时，想要修改height和padding，发现无法使用style样式不起作用 可以尝试用以下方法解决： 1、修改height，直接在el-header标签的行内修改
设置el-container高度为百分百
开发路上的AZhe
01-05 2374
/*把最外面的html，body设置为100%就好*/ html, #app, body { height: 100%; min-width: 900px; }
element-ui Container 布局容器高度自适应
小卡拉米的博客
12-09 749
（60px是el-header的高度）height: calc(100vh - 60px);（60px是el-header的高度）
element布局容器大小_让Element-ui的Container布局容器高度百分百显示
weixin_33110431的博客
01-17 2622
使用Element(2.13.1版本)的Container布局容器布局，按照官网的代码运行后不能撑开整个页面，只能显示一段高度，代码如下：HeaderleftMain那如何让它高度百分百显示呢？给html、body、#app及最外层.el-container的height设置100%即可。index.html：demo1html,body {margin: 0;height: 100%;}app....
vue3+ element plus+ts的门户网站自适应布局
11-22
为了实现vue3+ element plus+ts的门户网站自适应布局，可以按照以下步骤进行操作： 1. 安装vue-cli并创建项目 ```shell npm install -g @vue/cli vue create vue3-elementplus-mock-echarts ``` 2. 安装element-plus和sass ```shell npm install element-plus sass sass-loader ``` 3. 在main.ts中引入element-plus和sass ```typescript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import './assets/scss/index.scss' createApp(App).use(store).use(router).use(ElementPlus).mount('#app') ``` 4. 在App.vue中使用element-plus的Layout组件进行布局 ```vue <template> <div class="app-container"> <el-container> <el-header>Header</el-header> <el-container> <el-aside>Aside</el-aside> <el-main>Main</el-main> </el-container> <el-footer>Footer</el-footer> </el-container> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'App', }) </script> <style lang="scss" scoped> .app-container { height: 100%; display: flex; flex-direction: column; .el-container { flex: 1; height: 100%; .el-header { height: 60px; } .el-aside { width: 200px; } .el-main { flex: 1; } .el-footer { height: 60px; } } } </style> ``` 5. 在index.html中设置meta标签实现自适应布局 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <title>vue3-elementplus-mock-echarts</title> </head> <body> <div id="app"></div> </body> </html> ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值