vue 如何实时监控某个div的高度?

看到很多网站上都可以做到的一个效果:左侧是个菜单栏,右侧是个内容界面,当内容界面里的内容足够大时,高度自动的变大(即便高),而此时我们发现左侧的菜单栏高度是不变的。

clipboard.png


所以怎么去动态的平衡他们的高度呢?


用vue去监视内容的高度,然后再去设置另一个内容的高度?(我想不到怎么实现)
还有更好的方法么?各位路过的大神们…

回答:

你说的是不是多栏等高布局?

这是个常见的面试题哦…

见这位大神的文章http://www.zhangxinxu.com/wor…

回答:

首先vue没提供监控dom尺寸的功能。
vue中可以利用ref获取真实的dom。然后通过dom获取height。
然后把获取和计算height的方法写到生命周期中,触发生命周期就执行高度计算(平衡他们的高度)。

回答:

之前一个项目的需求是左边菜单栏100%高度。于是可以给它设置一个100vh的高度。
或者用calc()计算一下(例如100% – 100px),那么它的高度相对于浏览器来说,就是固定的。

回答:

div{
min-height:100px;

试试

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注