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

Question

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

---

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

---

用vue去监视内容的高度，然后再去设置另一个内容的高度？（我想不到怎么实现）
还有更好的方法么？各位路过的大神们...

Answer 1

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

这是个常见的面试题哦...

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

Answer 2

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

Answer 3

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

Answer 4

div｛
min-height:100px;
｝
试试