侧边栏与高度适应

Love The Way You Lie 2023-06-18 15:58 84阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，84人围观）

还没有评论，来说两句吧...

相关阅读

相关 requireJs sass侧边栏

koala 下载将sass编译为css文件 1 嵌套 2 $变量 3 @mixin 函数名(参数) 4 @include 函数调用 5 @import "xxx"

爱被打了一巴掌/ 2023年08月17日 16:20/ 0 赞/ 236 阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart';

落日映苍穹つ/ 2023年08月17日 15:59/ 0 赞/ 245 阅读

相关小米侧边栏--css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2023年07月02日 09:26/ 0 赞/ 190 阅读

相关侧边栏与高度适应

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

Love The Way You Lie/ 2023年06月18日 15:58/ 0 赞/ 85 阅读

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![ec862e11c6ccf6a4cf431

梦里梦外;/ 2023年01月14日 04:57/ 0 赞/ 502 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 466 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 438 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 521 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 831 阅读

相关 CSS实现侧边栏导航

CSS实现侧边栏导航

小鱼儿/ 2021年05月03日 15:53/ 0 赞/ 832 阅读