vue項目 菜單側邊欄隨着右側內容盒子的高度實時變化


測試的時候發現,在選擇模板、選擇產品第二步第三步的時候。如果超出兩行的話會蓋住看不見,(因為高度所有統一都被寫死了,又加了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的應用

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM