側邊欄與高度適應
阿新 • • 發佈:2018-11-11
來自我的部落格
在目前的大部分設計中,管理系統仍然不可忽視的一項重要功能就是側邊功能欄,然而在側邊功能欄上的開發,也繞過了許多的彎路
js側邊欄
在我新手時期,也寫過許多的側邊欄,側邊欄的要求很簡單,和螢幕高度保持一致,並且功能項能在內部進行滾動,當時的我也是煞費苦心,為了能夠準確地自適應,不得不用js去進行實現
$(window).resize(function(){
let sidebar = $('#dashboard-sidebar');
sidebar.css('height', 'auto');
let h = Math .max(sidebar.outerHeight(), $(window).height() - $('#header').height());
sidebar.css('height', h);
}).resize();
可以說是非常的愚蠢了,每次都要在視窗變動的時候重新計算,會有視覺上的延誤。
並且在首屏載入完成之前,還要忍受一個不正常的側邊欄等待渲染。
絕對定位側邊欄
在後續的開發中,覺得js實現側邊欄實在是太過愚蠢,不停地尋找解決方案的時候,發現實際上絕對定位是可以為我們解決問題的。
給側邊欄定好寬度,然後進行絕對定位,css會自動幫我們將高度和螢幕自適應,在很長一段時間內為我解決了問題。
position: fixed;
top: 0;
bottom: 0;
left: 0;
background-color: #444F61;
overflow-y: auto;
很簡單就完成了一個自適應的側邊欄,唯一的缺點就是因為使用了絕對定位,其他的元素得注意是否要紛紛繞道。
現在的側邊欄
後來由於絕對定位也是為我帶來了一定程度上的困擾,一旦我修改側邊欄,其他元素也要紛紛跟著移動,每次修改起來也是令人很頭疼,所以又開始研究其他的解決方案。
後來在使用bootstrap
的時候,也沿用了它所使用的一個css屬性值 vh
。
很擔心相容性的我去MDN上進行了一下相容性的查詢,IE9就已經支援了。另外如果側邊欄之上還有頂部導航欄,仍然可以使用計算屬性:
height: 100vh;
height: calc(100vh - 60px);
除了vh
以外,也有很多類似的屬性值如:vw
、 vmin
和 vmax
,都是進行自適應開發不錯的選擇。