css设置页面左侧栏div固定 不随页面滚动条滚动 （页面部分div随页面滚动）

最新推荐文章于 2024-06-24 14:03:22 发布
最新推荐文章于 2024-06-24 14:03:22 发布
阅读量4.5k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44970564/article/details/115554912
本文介绍了一种简单的网页布局技巧，通过在左侧栏使用 position:fixed; 的 CSS 属性，并适当调整右侧内容区域的 margin-left 值来实现固定位置的侧边栏效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

其实没有那么复杂，不要心急。

 

在左侧栏div块中  添加代码 ： position:fixed;

在右侧div的css样式中 ：修改div的margin-left的值   比如margin-left:200px;

如果不设置margin-left 可能出现以下情况

进行适当的调整  就可以了

  

html固定左侧不滑动,css fixed 定位 让局部UI固定 不跟随滚动条移动
weixin_39622760的博客
05-30 1414
文章目录在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题达到的效果 如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,...
用CSS隐藏或自定义侧向导航栏的滚动条
ice_teas的博客
11-03 1745
问题： 自己在做界面的时候做到导航栏那一块，发现导航栏内容过多时会出现一个浏览器自带的滚动条，这对于二分布局中左侧的导航栏来说是极其不友好的，因为浏览者可能会因为滚动条的突然出现而视觉干扰从而影响浏览体验，所以现在的任务就是隐藏这个自带的滚动条，或者对于一些有需要的朋友们也可以自己设计滚动条的样式。 解决方案： 首先我们得先制作出一个侧向导航栏：导航栏是在左侧，效果是固定在界面上并且有滚动需...
css实现网页栏目左侧固定当滚动到底部时自动调整位置
01-19
预览地址： https://ovsexia.gitee.io/leftfixed/ html: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <script
css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动
lyhDream的专栏
06-10 7479
一、需求 要让左侧边栏固定，并且不会随着页面的滚动向上滚动，侧边栏内容如果超出，可以显示滚动条 二、实现原理 设置布局：position: fixed 设置overflow-y: scroll 三、效果图： 四、实现代码 <!DOCTYPE HTML> <html> <header> <title>layout test</title> </header> <body> <style>
CSS实现左右两边不同时滚动
小傲哥哥的博客
04-14 3172
css布局，左边滚动时，右边不随着滚动，右边滚动时，左边不随着滚动 例子截图： 代码： <body> <div class="parent"> <div class="leftChild"></div> <div class="rightChild"></div> </div> ...
CSS布局设置如何才能做到左边滑动右边不动，右边滑动左边不动
CSDN for recording problems
06-22 7083
最近有个小东西，分类筛选左侧超出了固定高度，想要他两边滚动但是不影响又右边的内容区域 注意这里是微信小程序的，但是大同小异 先看来看看效果 其实实现方式很简单两个属性搞定的事 当然我这里在左侧的最外层盒子中使用position: fixed; + overflow: auto; + float: left;搞定了。 .side-tab{ position: fixed; height: 100%; overflow: auto; float: left; } 如果想去去掉左侧滚动条可以设.
DIV随滚动条滚动而滚动的实现代码【推荐】
09-02
总结一下，实现`DIV`随滚动条滚动而滚动的效果，主要步骤如下： 1. 引入jQuery库。 2. 使用jQuery的`$(window).scroll()`事件监听滚动行为。 3. 在滚动事件处理函数中，计算滚动条位置并更新`DIV`的`top`和`left`...
CSS实现导航固定的、左右滑动的滚动条制作方法
11-20
总结起来，通过设置CSS的`position: fixed`，`overflow-x: scroll`以及适当的布局和JavaScript辅助，可以轻松创建一个固定在顶部、支持左右滑动的导航栏。这种方法既保持了页面布局的整洁，又能适应不同屏幕尺寸和...
DIV固定布局技巧：实现内容不随滚动条移动
在本例中，描述提到的“固定在设定的地方，不跟着滚动条滚动”，很可能是指使用了CSS的`position`属性，并且设置为`fixed`值。 ### 知识点详解 #### 1. CSS的`position`属性 `position`属性在CSS中用于指定一个...
随滚动条移动的DIV层
03-17
在网页设计与开发过程中，为了提高用户体验以及页面的交互性，常常会遇到需要制作一个随滚动条移动的元素（如提示框、广告栏等）。本文将通过分析一段具体的代码示例，详细介绍如何利用HTML、CSS及JavaScript技术...
怎样使左侧菜单栏不随滚动条滚动
yulongkuke的博客
07-27 4957
怎样使左侧菜单栏不随滚动条滚动
CSS 相对父级固定，且不随滚动条滚动
最新发布
qq_41838435的博客
06-24 1026
【代码】CSS 相对父级固定，且不随滚动条滚动。
css样式-内容固定在页面底部，不随滚动条滚动
热门推荐
m0_51315555的博客
09-28 1万+
css样式-内容固定在页面底部，不随滚动条滚动；position: fixed;
div固定悬浮（左侧、右侧、任意相对位置）
qq_38370545的博客
04-10 2905
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
内容不随滚动条移动css,css div不随滚动条移动的实现方法
weixin_35826493的博客
08-03 2935
css div不随滚动条移动的实现方法：首先创建一个示例文件；然后通过给div设置css属性样式为“position:fixed;”即可固定div不随滚动条移动。本教程操作环境：Windows7系统、HTML5&&CSS3版本，Dell G3电脑，该方法适用于所有品牌电脑。css设置div不随滚动条移动把一个内容固定到某一个位置 ，相对与浏览器窗口进行定位就可以了。这里使用的是fi...
CSS -自定义滚动条样式
kelly0721的博客
02-25 562
以下没有经过探究，只针对webkit内核的浏览器 滚动条的组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb） ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置 ::-webkit-scrollbar-track-piece 内层轨道，
css页面滚动条出现时防止页面跳动的方法
青云码上的博客
12-26 1328
css页面滚动条出现时防止页面跳动的方法 大家写页面时应该都遇到过一个问题，尤其是写单页面应用的时候， 在有滚动条页面和没有滚动条页面之间相互跳转时， 你页面的主体内容会向左或者向右抖一下，让强迫症看了很不舒服。 现在就来解救一下强迫症： 方法一： 不管有没有滚动条，都保留滚动条区域 body{overflow-y: scroll;} 方法...
css如何控制某个div右侧,js和css控制DIV永远固定在页面某个地方
weixin_39819576的博客
08-03 271
js代码：html,body {width: 100%;height: 100%;margin: 0px;padding: 0px;overflow: hidden;}#Main {position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;overflow: auto;z-index: 1;}#ToolBar {positi...
三列布局，左右宽度固定，中间一列随浏览器窗口变化宽度
weixin_33774308的博客
11-08 210
以前在网上看到过，说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实，这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中的文档流和浮动流，然后考到了文档流和浮动流默认宽度和显示层级（我一般理解成index这种含义，或者画布中的上下层一样，浮动流会居于上层，文档流会居于下层，因此浮动流区块可能会部分遮住文档流区块，但是文...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值