來自我的部落格

在目前的大部分設計中，管理系統仍然不可忽視的一項重要功能就是側邊功能欄，然而在側邊功能欄上的開發，也繞過了許多的彎路

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，都是進行自適應開發不錯的選擇。