在一些需要自適應(yīng)高度的應(yīng)用場景中，我們經(jīng)常需要控制動態(tài)的height，以保證頁面的正常顯示。本文將通過Vue來介紹如何實現(xiàn)控制動態(tài)height的方法。

上面的示例中，我們通過監(jiān)聽window的resize事件來計算wrapper的最大高度，以保證內(nèi)容區(qū)域始終不超過wrapper的最大高度。在mounted中調(diào)用calcWrapperHeight計算并設(shè)置wrapper的高度，在beforeDestroy中移除resize事件監(jiān)聽。

其中，calcWrapperHeight中主要涉及以下幾個步驟：

1. 獲取wrapper的offsetTop（到上一級元素的距離）；

2. 獲取wrapper的paddingBottom；

3. 獲取屏幕可視區(qū)域的高度；

4. 如果wrapper設(shè)置了maxHeight，判斷是否超過最大高度，如果超過則設(shè)置wrapperHeight為maxHeight，否則設(shè)置為可視區(qū)域高度減去offsetTop和paddingBottom。

這里需要注意的是，只有當(dāng)wrapper的最大高度小于可視區(qū)域高度減去offsetTop和paddingBottom時，才設(shè)置wrapperHeight為maxHeight。這是因為如果wrapper的最大高度大于可視區(qū)域高度減去offsetTop和paddingBottom時，內(nèi)容區(qū)域不會溢出，所以不需要設(shè)置wrapperHeight為maxHeight。

通過這種方式，我們可以輕松實現(xiàn)Vue控制動態(tài)height。