vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化

本文分享了一种解决页面中分栏高度不等的问题的方法,通过调整CSS样式实现左右两个内容区域的高度同步,并保持侧边栏与主要内容区高度一致。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

测试的时候发现,在选择模板、选择产品第二步第三步的时候。如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式。如图:

 

那么问题来了,我步骤1选择产品和步骤2选择模板是同一个页面,只是父元素下的dom修改了而已。侧边栏是需要跟着右侧内容盒子高度进行变化,现在要修改同一个页面下的步骤1和步骤2的内容盒子高度,同时使左侧菜单栏高度实时变化.

也叫分栏高度自动相等

完成效果:

高度750px;

 

高度1048px;

 

首先,把当前页面写死的高度修改:

包裹左侧菜单栏和右侧内容盒子的父元素:parentBox  添加overflow:hidden; zoom:1;

左侧菜单栏:height:auto;margin-bottom:-900px; padding-bottom:900px;(此处大小可按照实际情况设置多大)

右侧内容盒子:height:100%;

 

以上的处理方式只适合像我这种左侧比较少操作的菜单栏,因为不确定一些骚操作会不会出现特殊的bug。目前来看我这边的话是没有出现。

最后,display:table-cell;的方法也是可以进行处理这种状态的。推荐关于display:table-cell等高布局的大神博客:

我所知道的几种display:table-cell的应用

 

转载于:https://www.cnblogs.com/web1/p/9013767.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值