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

最新推荐文章于 2023-09-18 17:32:45 发布
最新推荐文章于 2023-09-18 17:32:45 发布
阅读量1.7w 收藏 81
点赞数 16
分类专栏： css 文章标签： html css sidebar 侧栏 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexi225/article/details/83622949
版权

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>
hexi225
关注
  • 16
    点赞
  • 踩
  • 81
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
css3左侧导航固定页面无限滚动布局模板
12-13
左侧固定菜单是2014年最流行的网页布局之一。这款css3左侧导航固定页面无限滚动布局模板左侧菜单大小固定，主体内容区域可以无限向下滚动，效果类似于jQuery之家的首页的左侧导航栏。
CSS实现两栏布局，左侧固定宽高，右侧超高滚动加载
最新发布
三月和九月的博客
02-19 891
要实现左侧子元素高度固定，右侧子元素超高滚动加载，并且左侧子元素与父级元素高度一致且不跟随滚动，可以使用CSS的flex布局和overflow属性来实现。左侧子元素设置为固定高度，右侧子元素设置为flex-grow: 1，以占据剩余的空间。最后，为了使左侧子元素与父级元素高度一致且不跟随滚动，可以使用position: sticky和top: 0来固定左侧子元素在父级元素的顶部。接下来，将右侧子元素设置为overflow: auto，这样当内容超过右侧子元素的高度时，会出现滚动条。
css3视差滚动显示底部隐藏导航栏代码
11-19
css3视差滚动显示底部隐藏导航栏代码 css3视差滚动显示底部隐藏导航栏代码 css3视差滚动显示底部隐藏导航栏代码 css3视差滚动显示底部隐藏导航栏代码
CSS实现导航固定的、左右滑动的滚动条制作方法
11-20
如上效果的导航，导航是固定在顶部的，可以左右滑动点击更多选项的。 这种制作相当简单，本文只是提几点注意： 固定位置 菜单固定在顶部不动，使用 position:fixed; top:0; left:0;。同时要注意： 下面列表下移相应的位置，否则打开页面时，下方列表会被遮住一部分。 为菜单设置背景，否则透明的话，与下面列表滚动上来的内容会重叠显示。 为 body 设置背景，因为微信浏览器默认有个背景色（不是白色），可能会与我们的效果冲突，按需设置背景。 使用 table 通常我们使用 ul、li 作 float，但是当一行显示不下时，要让它不落到第二行的话，比较麻烦，所
bungie-bar:用于响应式滚动菜单栏的纯JavaScript解决方案
04-27
邦吉酒吧 这是为响应式，滚动菜单栏制作纯JavaScript解决方案的实践项目。 它的灵感来自的滚动菜单，该菜单仅在移动视口中可见。 入门 要使用Bungie Bar，请按照以下简单步骤操作： 在项目中包括bungie.js和bungie.css文件。 在要使用的导航栏上，将导航栏的三部分包装为<div> ：最左侧的ID left ，最右侧的ID right ，以及中间ID的bungie 。 这是导航栏的一部分，它将隐藏在较小的视口中，并提供滚动按钮。 接下来，根据需要配置CSS。 当前，样式是针对demo.html中包含的深色主题设置的，因此更改颜色将是主要的事情。 箭头符号是HTML字符‹ 和› ，但是这些可以替换您想要的按钮样式content中的任何其他符号。 （我推荐的替代箭头是⟩和⟨ ） 就是这样！ 尝试调整您的网页
CSS属性详解——position:fixed
Wod_7的博客
06-04 7807
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
CSS 固定定位 position fixed
热门推荐
cvper's world !
01-28 6万+
简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；                 注意：固定定位的位置是  相对当前浏览器窗口  的； 代码示例： 1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；  代码： *{margin:0;
CSS定位布局详解
大河之犬的博客
10-03 4408
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
CSS 固定定位：固定在版心右侧
atrainee的博客
07-10 7075
固定定位：固定在版心右侧 固定定位 定义：随用户滚动界面而一起移动的定位效果 CSS代码： position:fixed; 边距:left,right,top,bottom. 距离衡量:相对于浏览器可视区域的四个角，可视区域即用户打开浏览器可以看到的区域 用处：用于类似浮动的广告，回到最上面的按钮等，跟随用户滑动窗口一起运动的组件。 如何实现固定在版心右侧 给需要固定的组件添加CSS代码： position:fixed; left:50% margin-left:父组件宽...
html中fixed属性,CSSposition属性中：fixed使用详解
weixin_31999597的博客
06-05 6992
关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position...
TAB-左侧滚动菜单
11-22
基于CSS的TAB左侧导航，简单大气可直接使用。
web前端笔记1-hml，css部分
bantoumingasong的博客
10-05 1961
这里写目录标题一.基础内容1.网页1.1什么是网页1.2什么是HTML1.3网页的形成2.常用浏览器2.1常用的浏览器2.2浏览器内核3.web标准3.1为什么需要web标准3.2web标准组成二.HTML1.HTML语法规范1.1基本语法1.2标签关系2.HTML基本结构标签（骨架标签）3.常用开发工具3.1文档类型声明标签3.2lang语言种类3.3字符集4.HTML常用标签4.1标签语义4.2标题标签`-`4.3段落标签与换行标签4.4文本格式化标签![在这里插入图片描述](https://img-b
《CSS新世界》读书笔记
Jay的博客
01-04 2442
《CSS新世界》读书笔记。
HTML+CSS笔记
weixin_69123900的博客
04-20 173
本篇文章主要是针对个人学习前端做的笔记，基于html和css，有错误忘指正，格式还没调，都是直接从语雀复制过来的。
css:position fixed使用
看陌生的风景的博客
07-23 853
position:fixed的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 （上层元素有的使用了transform: translate(0, 0);导致position: fixed功能失效） pointer-events: none; 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其...
【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-12 1437
一、开发要点分析 二、代码示例
CSS解决position:fixed基于父元素定位而不是浏览器窗口
DDD4V的博客
03-08 1万+
众所周知fixed是基于浏览器窗口定位，但是今天遇到个问题，发现fixed并不一定是这样 有一个例外会使fixed是基于祖先元素定位。 当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。 <div class="container" style="transform:rotate(360deg);"> <div> <div class="box" style="position:fixed;"></div&
CSS布局（定位、浮动）
li17835756262的博客
09-18 539
（2）父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。
css侧边导航栏固定定位
06-08
要实现CSS侧边导航栏固定定位，可以使用CSS的position属性。具体来说，可以设置侧边导航栏的position属性为fixed，然后指定其left、top、right或bottom属性值来确定其位置。例如： ``` .nav { position: fixed; top: 0; left: 0; width: 200px; height: 100%; } ``` 这样就可以将导航栏固定在页面的左侧，并且不受页面滚动的影响。需要注意的是，如果导航栏的内容超出了其高度，可以使用overflow属性来控制其滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值