如何在相对div中包含固定的栏并完美地显示滚动条 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

如何使用 CSS 设置和自定义水平和垂直滚动条

在本节中，我们将按照以下步骤创建一个可滚动的侧边栏导航：a）创建带有导航项目的导航栏b）将导航栏样式设置为侧边栏c）将侧边栏位置设置为固定d）使用滚动条管理项目的溢出a)....下面的截图显示了我们即将创建的侧边栏：侧边栏要创建上面的侧边栏，我们将在CSS中进行以下更改：将导航栏的显示更改为flex，并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加...下面的截图显示了侧边栏与正常内容流分开：固定溢出的侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动，但侧边栏保持在用户的视图中。...以下代码片段包含了将侧边栏设置为固定位置的样式，如上述截图所示。...可滚动的侧边栏隐藏扩展内容并显示侧边栏的代码片段如下所示： nav{ /* 先前的样式在这里 */ overflow-y: scroll; }关于overflow-y

4.2K0 0

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

一、固定定位概念语法 ---- 固定定位是固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位完全脱离标准流 , 不占用布局中的位置 , 漂浮在任何元素上方...; 固定定位只相对于浏览器可视窗口进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位与父元素没有任何关系 ; 固定定位与滚动条滚动没有任何关系 ;...固定定位的元素始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位的本质是一种特殊的绝对定位 ;...就是固定定位元素 , 拖动滚动条并不会改变固定定位元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码的基础上 , 将中心的标准流元素设置为固定定位元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;

2.1K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

; 6、相对定位相对定位是盒子模型相对于其在标准流中的位置设置的 ; 如 : 盒子模型在标准流中 , 原来的位置是 (0 , 0) , 设置了相对定位 , 就是相对于原来的位置 (...0, 0) 进行边偏移后的位置 ; 下面的示例中 , 盒子模型的初始位置是在浏览器的左上角 ( 0 , 0 ) 位置 , 此时设置相对定位 , 并设置边偏移 , 使用 margin 也可以实现盒子放置在...; 父级元素需要占位 , 必须使用相对定位 ; 子元素需要任意摆放 , 必须使用绝对定位 ; 9、固定定位概念语法固定定位是固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变...; 固定定位与父元素没有任何关系 ; 固定定位与滚动条滚动没有任何关系 ; 固定定位的元素始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是浏览器可视窗口 , 不管浏览器大小如何...: 在下面的网站 , 顶部的导航栏 , 与右侧的三个按钮 , 就是固定定位元素 , 拖动滚动条并不会改变固定定位元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ;

1.6K1 0

css中绝对定位_绝对定位和相对定位怎么用

/*设置相对定位我们就可以使用四个方向的属性 top left right bottom 相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。...那么是以浏览器的左上角为参考点如果用bottom描述，那么是以浏览器的左下角为参考点作用： 1.返回顶部栏 2.固定导航栏 3.小广告 */ position: fixed...: none; } a{ text-decoration: none; } body{ /*给body设置导航栏的高度，来显示下方图片的整个内容*/ padding-top...top属性和left属性，固定定位脱标，填充图片会被遮挡，设置body的padding之后导航栏会随之下移固定定位以浏览器为参考，设置top和left之后定在浏览器顶部 */...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

3.1K3 0

浮动清楚浮动及position的用法

关于浮动的两个特点：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...relative（相对定位）相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...absolute（绝对定位）定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...z-index 值表示谁压着谁，数值大的压盖住数值小的，只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

2.5K4 0

Bootstrap实战 - 单页面网站

二、知识点 2.1 滚动监听滚动监听使用了 Bootstrap 的 JavaScript 插件，根据滚动条所处的位置自动更新选中导航栏。...并且给导航栏添加样式 navbar-fixed-top 使其固定在顶部不随滚动条移动而移动，但这样的话会遮住 body 上面的一部分内容，所以同时给 body 添加样式 padding-top: 60px...> div> 触发监听依赖元素的属性 id="nav-menu"，滚动监听的效果是由样式为 scrollspy（这里可以是任意值，只是做个示例）载体在其容器的滚动条变化时，随着载体的内容在视觉中的变化...这里的滚动条对应的是 body 元素，所以给 body 元素加上属性 data-spy="scroll" 和 data-target="#nav-menu"（这里的值对应导航的 id 值），同时加上相对定位样式...在定制页面中，CSS 样式不仅可以筛选，还可以改变默认属性，例如：改变导航栏的背景颜色，直接在属性 @navbar-default-bg 下面修改即可。

9.4K10 4

前端知识点总结（html+css）（上）

常见块级元素、行内元素、行内块元素的特点和区别块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%；可以设置高度宽度内外边距块级元素可以包含其他的块级元素和文本...（如div下可包含div）行内元素（常见的行内元素a,span.img）一行显示多个宽度为内容的宽度不可以设置高度和宽度标签内一般不包含标签（如a标签内包含a标签）行内块元素行内块元素包含块级元素和行内元素的特征...visibilty:hidden //隐藏对应元素，在文档中仍保留位置 opacity：0 //隐藏元素，占位置，可添加事件 9. css中的overflow属性 scroll //必会出现滚动条...auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....px和em的区别是什么 px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。

1K1 1

CSS 布局技巧 | 移动端 H5 滚动条深度解析，从触发逻辑到多端兼容

改造进展相对顺利，因为项目用的antd组件，大部分内容在手机横屏模式下，可以正常展示。部分错位或超出的展示，调整也相对简单。唯独滚动功能，出现了兼容性问题。...局部滚动：在固定宽高的div内滚动，适用于需要局部滚动的场景。（2）滚动事件的监听在移动端，可以通过监听touchstart、touchmove和touchend事件来实现滚动条的触发。...伴随着布局精细化、“无干扰”界面等要求的提出，overflow: auto支持按需显示滚动条，尤其在内容动态加载的场景（如分页列表、折叠面板）中更友好。...（2）对比示例两种属性在相同容器中的表现：.container-auto { overflow: auto; /* 仅在溢出时显示滚动条 */ width: 100%; height: 200px...: nowrap; /* 强制内容不换行 */}2.2 scroll 的保留场景尽管 auto 已成主流，scroll 仍有特定用途：强提示滚动区域：如地图容器、横向导航栏，需明确提示用户可滚动。

2962 0

css属性及定位操作

颜色是通过CSS最经常的指定：十六进制值 – 如: ＃FF0000 一个RGB值 – 如: RGB(255,0,0) 颜色的名称 – 如: red 文字属性文字对齐 text-align 属性规定元素中的文本的水平对齐方式...关于浮动的两个特点：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...relative（相对定位）相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...absolute（绝对定位）定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。

3K5 0

scrollWidth,clientWidth,offsetWidth的区别

） clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。...offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变 event.clientX...相对文档的水平座标 event.clientY 相对文档的垂直座标 clientWidth:是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。...clientHeight:都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

2.6K2 0

WEB入门.七 CSS布局模型

本章将介绍如何在盒子模型的基础上，使用盒子模型来设计出适应多种行业应用的复杂页面布局，如网易、淘宝等门户网站的页面布局。...="search">搜索栏div> div> “网站LOGO” 块与“当前日期”块、“搜索栏”块将分别独占一行显示，并没有实现如图3.1.5所期望的效果。...，则在包含块中可从添加相对定位属性。...其中，Yes 表示一直显示滚动条，而 No 则表示无论什么情况都不显示滚动条；Auto 是系统的默认值，它是根据具体内容来调整的，也就是当页面长度超出浏览器窗口的范围就会自动显示滚动条。...，而且在页面中虽然无法显示全部的内容，但是并没有出现滚动条，如图 3.1.39 所示。

4411 0

CSS布局(三) 布局模型

（每一个便签都显示着自己本来默认的那个宽高）第二点，在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。...绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位...如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。...固定定位 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响

2.6K7 1

CSS基础知识

p{color:red;} 三年级时，我还是一个胆小如鼠的小女孩。结果p中的文本与span中的文本都设置为了红色。...实际上，块状元素都会以行的形式占据位置。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。...如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口相对于浏览器窗口处于右下角。并且拖动滚动条时位置固定变化。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...相对于浏览器视图处于右下角。并且拖动滚动条时位置固定不变。

1.3K3 1

CSS 7：网页布局（传统布局，flex布局，布局套路）

传统布局一栏、两栏、三栏布局一栏布局特点：页面内容居中，宽度固定实现方式：定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-left...: auto; margin-right: auto; 演示地址范例注意 max-width和width的区别：使用固定width的时候，如果浏览器缩小到比设置的宽度要小，那么会出现滚动条（不允许宽度小于...对了，滚动条 bug。因为layout是固定宽度，而有背景色的上下通栏是自适应的屏幕宽度，所以当小于.layout的宽度的时候，会出现滚动条。...是三列布局，两边固定宽度，中间自适应中间内容元素在 dom 元素次序中优先位置按照注释编号，一行行实现观察效果范例 http://js.jirengu.com/poya/1/......主要需要修改的是显示的宽度width：auto,直到左右不能滑动为止。

4.4K4 1

动手练一练，手写一个价格对比、固定表头滚动的表格

今天我们将通过一个界面十分漂亮功能价格对比的表格，展示固定表头的功能，实例操作展示如视频所示，当滚动条滚动至表格位置，添加表头固定样式，当滚动至表格底部，移除固定表头样式。...pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。...scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...，上，右和下分别相对浏览器视窗的位置。...-- more rows here --> div> div> 该表格包含4列，代表产品服务的对比项目和服务的级别，服务级别包含：入门级

3.7K3 1

WEB入门.七 CSS布局模型

本章将介绍如何在盒子模型的基础上，使用盒子模型来设计出适应多种行业应用的复杂页面布局，如网易、淘宝等门户网站的页面布局。...="search">搜索栏div> div> “网站LOGO” 块与“当前日期”块、“搜索栏”块将分别独占一行显示，并没有实现如图3.1.5所期望的效果。...，则在包含块中可从添加相对定位属性。...其中，Yes 表示一直显示滚动条，而 No 则表示无论什么情况都不显示滚动条；Auto 是系统的默认值，它是根据具体内容来调整的，也就是当页面长度超出浏览器窗口的范围就会自动显示滚动条。...，而且在页面中虽然无法显示全部的内容，但是并没有出现滚动条，如图 3.1.39 所示。

3441 0

CSS深入理解学习笔记之overflow

注：除chrome浏览器之外，其他所有浏览器的padding-bottom是缺失不显示的。也会导致scrollHeight值不一样。 ?...）；ⅱoverflow子元素transform（支持IE9+/FireFox/Chrome/Safari/Opera）　　overflow失效妙用：　　　　菜单栏固定显示。...resize的拖拽区域默认大小是17px * 17px。滚动条的尺寸也是17px。　　文本溢出省略号显示属性text-overflow:ecllipsis。...（2）锚点定位的本质　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。　　　　前提：①容器可滚动；②锚点元素在容器内。　　...（3）锚点定位的触发　　　　①url地址中的锚链与锚点元素；　　　　②可focus的锚点元素处于focus状态；　　（4）锚点定位的作用　　　　①快速定位　　　　②选项卡技术　　　　③单页应用

4.7K5 0

frameset标签设计页面

②、src：设定此框架要显示的网页名称或路径。此为必须设置的属性。 ③、scrolling：设定是否要显示滚动条。设定值为auto, yes, no。...-- 左边菜单栏显示--> 2 div > 3 4 何在子页面中获取父页面所在的frameset中的其它的frame中的元素？...即如何在 right.html 中获取 left.html中标签的属性值等等 $(parent.parent.mainFrame.document).contents().find("body...").html(); //manFrame指的是你想要查看的那个frame的id 比如上面的 left.html页面中,任务创建的 ID 为 taskCreat，那么我们可以这样获取：并改变它的 class

3.2K9 0

CSS笔记

用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。...relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。 fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。...元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） Overflow visible 默认值。...hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...left right none 布局-水平&垂直对齐要水平居中对齐一个元素(如 ), 可以使用 margin: auto; 文本在元素内居中对齐，可以使用 text-align: center; 导航栏

2.3K2 0

html网页详细代码「建议收藏」

(要使用绝对地址) 有些站点，访问时会在地址栏地址前显出小图标，添加到收藏夹后也在收藏栏中显示图标，这样很好的与其它站点有了区别。...中的网页来源，必要加上相对或绝对路径。　　...第一种：可能是因为你定义并正在使用一个site，而你的HTML文件或者图片不在这个site包含的区域之内，因此dreamweaver使用file协议来描述图象的绝对路径，可惜IE不支持src中使用file...中的网页来源，必要加上相对或绝对路径。　　...第一种：可能是因为你定义并正在使用一个site，而你的HTML文件或者图片不在这个site包含的区域之内，因此dreamweaver使用file协议来描述图象的绝对路径，可惜IE不支持src中使用file

8.5K4 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭