侧边栏与高度适应

发表于 更新于 分类于

在目前的大部分设计中，管理系统仍然不可忽视的一项重要功能就是侧边功能栏，然而在侧边功能栏上的开发，也绕过了许多的弯路

js侧边栏

在我新手时期，也写过许多的侧边栏，侧边栏的要求很简单，和屏幕高度保持一致，并且功能项能在内部进行滚动，当时的我也是煞费苦心，为了能够准确地自适应，不得不用js去进行实现

1
2
3
4
5
6
$(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会自动帮我们将高度和屏幕自适应，在很长一段时间内为我解决了问题。

1
2
3
4
5
6
position: fixed;
top: 0;
bottom: 0;
left: 0;
background-color: #444F61;
overflow-y: auto;

很简单就完成了一个自适应的侧边栏，唯一的缺点就是因为使用了绝对定位，其他的元素得注意是否要纷纷绕道。

现在的侧边栏

后来由于绝对定位也是为我带来了一定程度上的困扰，一旦我修改侧边栏，其他元素也要纷纷跟着移动，每次修改起来也是令人很头疼，所以又开始研究其他的解决方案。

后来在使用bootstrap的时候，也沿用了它所使用的一个css属性值 vh。

很担心兼容性的我去MDN上进行了一下兼容性的查询，IE9就已经支持了。另外如果侧边栏之上还有顶部导航栏，仍然可以使用计算属性：

1
2
height: 100vh;
height: calc(100vh - 60px);

除了vh以外，也有很多类似的属性值如：vw、 vmin 和 vmax，都是进行自适应开发不错的选择。