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,都是进行自适应开发不错的选择。