js側邊欄
在我新手時期，也寫過許多的側邊欄，側邊欄的要求很簡單，和螢幕高度保持一致，並且功能項能在內部進行滾動，當時的我也是煞費苦心，為了能夠準確地自適應，不得不用js去進行實現
$(window).resize(function()).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);
兩欄自適應布局與高度自適應
float bfc 使用 float 讓 left 塊脫離文件流，使用 bfc 規則，讓 right 塊寬度自適應，如下 類似聖杯布局給父元素設定 padding left right 元素寬度 100 left 元素通過 設定 left 和 margin left 屬性拉取到前面 flexflex...
側邊欄 前端小案例之側邊欄
簡單側邊欄案例 隱藏右邊盒子滑鼠經過時顯示 最近剛開始入門學習前端用簡單的html結構加css樣式寫了個側邊欄的小案例在這裡分享給大家。效果如下 該案例主要是在乙個sidebar盒子裡面左邊放乙個ul做側邊欄裡面的li作為每一行的內容，然後將sidebar mask盒子定位到側邊欄的右邊，用disp...
側邊欄廣告
1 23192031 323334 天王蓋地虎，小雞燉蘑菇 35天王蓋地虎，小雞燉蘑菇 36天王蓋地虎，小雞燉蘑菇 37天王蓋地虎，小雞燉蘑菇 38天王蓋地虎，小雞燉蘑菇 39天王蓋地虎，小雞燉蘑菇 40天王蓋地虎，小雞燉蘑菇 41天王蓋地虎，小雞燉蘑菇 42天王蓋地虎，小雞燉蘑菇 43天王蓋地虎，...