CSS 实现导航栏和左侧栏固定内容区滚动_sidebar和内容区怎么各自滚动-程序员宅基地

CSS 实现导航栏和左侧栏固定内容区滚动

将navbar、sidebar、content相对浏览器固定。
navbar距离左右为0（使其占整宽）。
sidebar距离下为0、距离上为navbar的高度（使其占除了navbar外的浏览器整高）。
content向右浮动，距离下右为0、距离上为navbar的高度，设置overflow:scroll 。
在这里插入图片描述

<html>

<head>

    <style>
        .navbar {
     
            margin-bottom: 0;
            position: fixed;
            left: 0;
            right: 0;
        }

        .sidebar {
     
            background: lightgray;
            padding: 0;
            position: fixed;
            top: 52px;
            bottom: 0;
        }

        .content {
     
            position: fixed;
            top: 52px;
            right: 0;
            bottom: 0;
            overflow: scroll;
        }
    </style>

</head>

<body>

    <div class="navbar navbar-inverse"></div>

    <div class="container-fluid main">
        <div class="row">
            <div class="col-md-2 sidebar"></div>
            <div class="col-md-10 content pull-right"></div>
        </div>
    </div>

</body>

</html>

本文链接：https://blog.csdn.net/hexi225/article/details/83622949

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

x86设备直接刷写二合一群晖系统，带扩容二合一硬盘教程_群晖二合一盘制作教程-程序员宅基地

文章浏览阅读1.2w次。是打算_群晖二合一盘制作教程

sublime快捷键：快速查找函数和快速匹配括号_sublime 如何匹配对应的括号-程序员宅基地

文章浏览阅读4.2k次，点赞2次，收藏2次。1. 快速查找函数Ctrl+R2. 快速匹配括号光标置于括号中，Ctrl+Shift+M 快速匹配括号内容，再按下 Ctrl+Shift+[ 折叠代码, Ctrl+Shift+] 展开代码。3. 回到上一编辑处Alt+- 回到上一次编辑的地方，多次按可以追溯到编辑轨迹Shift+Alt+- 对应的返回下一编辑处，直到最终编辑的地方。这里说的编辑处，实际上就是指的光标所在的地方..._sublime 如何匹配对应的括号

ardupilot FFT分析与使用_fft自检-程序员宅基地

文章浏览阅读507次。但对于多旋翼飞行器，几乎所有的振动都源于电机的旋转频率，直升机和飞机的振动与主旋翼或螺旋桨速度有关，对此，我们必须使用软件过滤来去除更多的噪音。本期教程旨在通过开启FFT（默认不开启），跟踪电机或其他固定振动产生的噪音并将其过滤后，解决其对IMU的影响，减少干扰，提升无人机飞行的稳定性。设置 FFT_ENABLE = 1，启用 FFT 引擎，将会出现以下默认数值。所涉及功能仅在具有2MB内存的飞控中具备，官方建议H7处理器以上飞控开启，开启前请检查飞控是否处于最新固件，确定您的飞控是否具有该功能。_fft自检

8年码农谈谈程序员写博客的重要性_码农写博客-程序员宅基地

文章浏览阅读833次。引言先说下本人吧。作为一位前端开发者，我入行也有七年多了，做过的大大小小项目数量上早已过百。以前一直觉得前端难度不大，在做项目的时候根据以前学习的职业技能和经验也够用了，遇到一些难点的地方就在网上翻资料也能解决。怎么说呢，感觉自己写代码的风格也多变，善用各种框架插件做开发，属于敏捷开发类型。只要有前端需求基本能实现出来。转折点近两年跟朋友合伙创业，接一些外包单做做，打算以此发展一番事业。慢慢的发现做外包是没前途的，只能维持生计，团队里也没能萌生出一个能持续发展的项目，在今年疫情的影响下，终究挡不住洪_码农写博客

2. 搭建一个Spring Cloud项目_javacloud怎样集成unity-程序员宅基地

文章浏览阅读238次。搭建一个SpringCloud项目1.New Project2.聚合总父工程名字3.Maven选版本4.工程名字5.字符编码6.注解生效激活7.java编译版本选88.File Type过滤9.删除src文件夹10.修改pom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww_javacloud怎样集成unity

关联数据库中多张表_关联数据-程序员宅基地

文章浏览阅读1k次。在本系列的前两篇文章（“ 使用RDF创建数据网 ”和“ 使用SPARQL查询RDF数据 ”）中，您了解了资源描述框架（RDF）以及SPARQL协议和RDF查询语言（SPARQL）—两个万维网联盟（W3C）标准，用于创建可移植的，可查询的，网络友好的数据。通过RDF的图形模型，可以轻松地从各种来源收集有关主题的信息。现在，您知道如何通过HTTP将RDF数据提取给您以进行本地查询，或将查询推送..._开放关联数据云图