iview中修改布局组件中的侧边栏高度

最新推荐文章于 2024-02-01 16:18:08 发布
原创 最新推荐文章于 2024-02-01 16:18:08 发布 · 2.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iview #前端

本文介绍了解决iView布局组件无法全屏显示的问题。通过调整Sider标签的父Layout样式，实现布局高度撑满全屏，提升用户体验。

问题

iview中的布局组件看起来十分不舒服，原因在于它的高度不能铺满屏幕全屏，而官方也没有相关修改高度的api，要改变它的高度就必须要修改它的默认样式。

方法

这是官方的布局

在这里插入图片描述
这样看起来就很不舒服

修改样式代码

在Sider标签的上一个Layout父标签添加

style="position:absolute;top: 64px;bottom: 0px;left: 0px;right: 0px;"

在这里插入图片描述

然后再在 class="layout"的div标签添加样式

 width:100%;
 height:100%;

在这里插入图片描述

在这里插入图片描述

这是就可以看到iview的布局高度是撑满全屏 的了

在这里插入图片描述

iview框架高度不够，应在这设置样式
ProbieHimself的博客
11-04 778
把iview框架导入你的代码中，显示你的高度只有页面的一半，比如这样 那就应该在你的app上设置高度，代码放下面了 ivu-layout是整个框架，大家可以根据相应的代码进行更改 <style lang="scss"> body{ width: 100%; height: 100%; } html{ width: 100%; height: 100%; } #app{ width: 100%
iView 4.* 自定义侧边栏触发器（修正）
1H1R1M的博客
08-17 885
#1）问题： 去年刚接触vue，写过要给通过iView框架自定义侧边栏触发器的布局内容。当时对vue和它的生态一窍不通，也没什么基础，所以之前的那篇文章还有许多问题。但是还有两个小伙伴有问到其中菜单伸展隐藏的问题，借此机会重新把之前写的整理一下，同时解决一下之前没有解决的问题，希望能给一些小伙伴一些帮助。 #2）过程： 2.1 依赖包，"view-design":"^4.3.2" 2.2 vue-cli创建一个hello项目（过程略） 2.3 使用iView官网的布局模板 2.4 左侧侧..
【vue】如何修改iview组件的样式（element同）
阿杰
10-07 9086
使用vue必然会用到等iview组件库，但是iview的组件的样式跟自己写的div的样式修改不太一样 正文 先引入一个iview按钮 <Button>Default</Button> F12，点开开发者人员工具，点击选择器，或者Ctrl+Shift+C 然后点击刚才添加的Default按钮，如下就是按钮的不同情况的样式 ivu-btn为主样式 可以现在开发者工具中...
Vue项目中修改IView的默认样式 以修改Modal组件的默认样式为例
weixin_49098968的博客
02-15 2747
在Vue项目中修改IView组件库中组件的默认样式，在此文中以修改Modal组件的样式为例，修改其他的组件也是相同的方法。
vue项目中对IView中组件的样式进行修改
weixin_46329670的博客
08-17 1017
使用深度选择器，进行组件样式穿透。
厚积薄发 前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
weixin_33701564的博客
11-19 364
这是我们经常可能会遇到到一种布局方法，或者是右侧固定，左侧自适应，下面列出我归纳总结的几种方法，是实际开发中比较常用和实用的几种方法 GitHub项目链接 写在前面 归纳总结了几种比较ok的方法，左右布局是基本功之一，虽然现在我们基本在开发中都会使用类似antd，element，iview这些前端ui框架，这些框架已经把传统的布局样式给封装的很完美了，但是作为前端的css基础，我认为这些也是必须掌...
VUE(四)•iview页面布局之左侧边栏撑满屏幕
Damon Lee的博客
09-04 3080
左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法 写在前面 归纳总结了几种比较ok的方法，左右布局是基本功之一，虽然现在我们基本在开发中都会使用类似antd，element，iview这些前端ui框架，这些框架已经把传统的布局样式给封装的很完美了，但是作为前端的css基础，我认为这些也是必须掌握的，而且很有可能在实际开发过程中就遇到了呢 方法一：左侧div浮动 右侧元素设置margin...
iView Admin Pro框架侧边栏子目录如何取消掉
最新发布
03-16
在布局组件中（如`src/views/main.vue`）找到侧边栏组件，添加`hide-children`属性： ```vue :menu-list="menuList" :hide-children="true" // 强制隐藏子菜单 /> ``` 根据引用[4]的组件导入逻辑，该属性可能需...
[03][创新实训记录]iview实现侧栏和页面的关联
qq_41998718的博客
06-19 723
iView实现侧栏和显示页面的关联iview是什么利用iview实现管理界面侧栏功能布局侧边栏Sider与内容Content关联刷新后侧边栏高亮保持不变 iview是什么 iview是一套基于Vue.js的高质量UI组件库，里面组件齐全、组件美观，是一套适合开发界面管理系统的UI组件库，因此我们选择其作为开发项目实训管理系统的参考。 利用iview实现管理界面侧栏功能 布局 iview提供了各种形式的Layout，我们可以在其中选择适合自己开发的项目的后台布局，实现相应的侧边栏功能。 我这里选择的是顶部-侧
vue动态修改侧边菜单栏宽度
qq_24441205的博客
02-01 1143
注：–base-sidebar-width 是scss中侧边菜单宽度变量。2.在data中定义宽度变量 sideWidth。1.添加可修改宽度的dom元素。
Vue.js iView Layout相关修改
月想容的博客
04-17 9895
问题：        在利用Vue.js和iView组件库设计网页时，使用原生的html代码太多，并不好维护。回看iView官方文档，发现有个布局组件，考虑能不能使用这个进行简单的重写。过程：        由于个人编写的是一个应用型后台管理网站，所以选取如图的整体布局        整体代码可以简单的表示成&lt;template&gt; &lt;Layout&gt; &lt;!-- he...
iview-layout布局
weixin_30795127的博客
06-28 1525
Layout：布局容器，其下可嵌套HeaderSiderContentFooter或Layout本身，可以放在任何父容器中。 Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。 Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。 Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Lay...
iView 实战系列教程(21课时)_4.iView 实战教程之布局篇（二）
weixin_30616969的博客
07-16 957
https://github.com/iview/iview 下载iview的代码 Layout布局大概的样子 Iview的源代码。Layout 组件比较简单，，里面一个slot Sider是最复杂的组件 这里用了v-model的语法糖是，是vue里面的 上面的v-model实际就相当于下面的这段，通过事件改变了value的值 了...
iView侧边栏（Sider）宽度修改
momo_mo520的博客
05-11 2749
想要修改Sider宽度，却发现在vue的style中设置并不成功。研究过后发现，不成功的原因有下面几点： 1、默认样式有最大宽度限制，所以不成功； 默认样式最大宽度限制 2、可以在元素的行内标签设置修改，不能在样式表中修改，原因是iview的默认样式设置在了element.style中。要对element.style中的设置复写，就只能采用行内标签方式。 element.style中的设置 所以，综上，在元素标签中使用行内sty...
iview菜单（Menu）和选项卡（Tabs）的组合应用
weixin_43890267的博客
05-30 5679
iview菜单（Menu）和选项卡（Tabs）的组合应用前提最后成果总体流程创建layout布局将所有router组件进行注册进行编码总结 前提 本人学习iview阶段，组合应用的前提要掌握vue，vue-router等基础，本次项目利用的是router-link和router-view进行的操作，才可实现。 最后成果 相对于一些管理系统等，都会有着一定的帮助。 总体流程 创建layout布局 ...
iview获取_vue+iview 项目
weixin_42138788的博客
02-06 627
vue-cli3创建项目 (创建一个项目 | Vue CLI)1,vue ui (视图创建,会在localhost打开页面,创建项目)2,vue create hello-world路由跳转// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$rout...
iview中的Modal和Drawer
weixin_45426989的博客
11-07 2980
iview中的Modal和Drawer 在后台开发中，经常使用到Modal和Drawer，尤其是Drawer用的很多很多，比如一些添加和编辑操作，就使用Drawer来呈现表单。 <Drawer title="角色设置" // 设置Drawer的标题 v-model="roleCountUpdate" // 绑定的值用来表示是否显示这个Drawer ...
uview框架 u-index-list 组件高度自定义调整
qq_29714999的博客
11-11 2373
使用uview框架2.0版本中的u-index-list组件高度自定义调整
iview学习笔记
yh_1524的博客
01-04 835
1.Layout标签不能撑满页面 解决办法： 在Layout标签中加入样式 :style="{minHeight: '100vh'}"
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值