导航栏设置fixed定位时，缩小浏览器没有滚动条，多余部分直接被隐藏的问题

最新推荐文章于 2026-06-21 15:46:45 发布
原创 最新推荐文章于 2026-06-21 15:46:45 发布 · 1.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html #css #css3
当使用fixed定位的导航栏在无滚动条时导致多余部分被隐藏，可以尝试使用sticky定位作为解决方案。文章讨论了如何通过媒体查询重新布局以及sticky定位的使用方法。同时，提到了sticky定位的兼容性问题，特别是在需要透明背景时可能失效，建议根据需求切换relative和sticky定位。此外，还指出了sticky定位的生效范围限制。
导航栏设置fixed定位时，没有滚动条，多余部分直接被隐藏的问题

一般解决方法：媒体查询重新布局等

解决方法 使用 sticky 定位

注意：

  1. 兼容性问题
  2. 若导航栏希望设置background-color: transparent; 则会失效，背景为白色，可以在需要背景色的时候设置为 relative 定位，不需要设置纯透明则设置为 sticky 定位
  3. sticky 只在兄弟元素及其子元素上有效果，在父元素的兄弟元素及其子元素上没有效果，直接消失
CSS滚动条不显示的原因和解决方案
2301_79326930的博客
09-28 3217
本文将详细解析可能导致滚动条不显示的原因，并提供相应的解决方案。如果你的内容没有超出容器的高度，滚动条将不会出现。因此，确保容器内的内容超出容器高度是显示滚动条的前提。滚动条不显示的原因可能是内容没有超出容器高度或滚动条被隐藏。要解决这个问题，确保容器内的内容超出容器高度，并设置正确的。要使滚动条显示出来，确保容器内的内容超出容器的高度。希望本文能帮助你解决CSS滚动条不显示的条不显示的问题。这样做会强制浏览器显示滚动条，即使内容没有超出容器高度。这将使得当内容超出容器高度时，出现垂直滚动条。
【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-13 8102
一、核心要点分析 1、顶部导航栏要点 2、固定定位垂直居中设置 二、代码示例
顶部导航栏fixed布局右侧不出现滚动条
IT学霸
06-07 2263
一、正常情况 顶部导航栏使用fixed布局后，如果页面内容超出了屏幕高度，右侧是会出现滚动条的。效果如下： 蓝色区域是顶部的导航栏区域，可以看到右侧出现了滚动条。 二、CSS代码设置后 如何让滚动条只出现在导航栏下面的内容区域了？原理就是使页面body元素和html根元素的高度固定为屏幕的高度。整个页面内容就不会让浏览器自动显示整个页面的滚动条，而在页面内部，只会让需要滚动的页面元素出现滚动条。 这种情况下，顶部导航栏只要宽度设置为100%，计算出来的宽度就是不包含滚动条的宽度值(假如屏幕宽度
scrollIntoView()，头部有fixed布局会导致滚动条丢失精度的问题，怎么办
u012732909的博客
07-24 1635
使用CSS的scroll-margin-top属性，在元素滚动到达时添加一个额外的距离，以避免滚动到头部fixed布局之下。
iview Table fixed 滚动条被遮挡
qq_40473838的博客
06-28 1168
给ivu-table-fixed设置高度是为了ivu-table-fixed-body 给height:100%高度设置范围，因为ivu-table-fixed-body是ivu-table-fixed子节点 ivu-table-fixed-body是基于父节点这样计算逻辑就相较方便一些，只需要100%减去头部和底部滚动条高度就可以了。查看样式发现ivu-table-fixed 未设置高度 ivu-table-fixed-body高度是框架计算的。-------分割线-------那知道问题了就好解决了。
CSS层叠样式表之浮动布局与定位
L201122y的博客
03-20 243
CSS层叠样式表之浮动布局与定位
CSS文本单行控制：从white-space到text-overflow的完整链路
最新发布
chuoshao2508的博客
06-21 494
在Web前端开发中，实现文本单行显示并非仅靠white-space: nowrap即可完成，而是一个涉及容器尺寸约束、换行策略、溢出裁剪与视觉反馈的系统性工程。其底层原理基于CSS盒模型与渲染流程：white-space决定空白符和换行符处理方式，overflow控制内容溢出行为，text-overflow则在块级上下文中提供省略号提示。该技术组合广泛应用于中后台表格、多语言适配、数据看板及响应式卡片等场景，尤其在处理长订单号、API路径、国际化文案时，直接关系到布局稳定性与用户体验。本文聚焦white-s
el-table使用fixed后最后一行被遮挡
qq_24133535的博客
08-09 1881
el-table最后一列设置了fixed=“right”，没有滚动条的时候，最后一行就会被遮挡掉一半。
css overflow-x: scroll 不展示/隐藏滚动条
Dream_Fever的博客
03-30 7073
除了可以设置隐藏滚动条，还有其他的伪类。
position：fixed 失效
lunmeifan的博客
04-12 1441
position :fixed 失效的问题，多半是因为父元素设置了transform 属性 ，使父元素在进行transform的过程中，形成一个浮层，所以看似页面在滚动或是发生变化，实际上页面并没有滚动。 解决方案一、将父元素的transform属性去掉。（这应该是不可能的。） 解决方案二、将对于设置fixed属性的元素脱离出带有transform属性的父元素 ...
【CSS】如何解决浏览器缩小出现横向滚动条时网页背景图右侧出现空白的问题
Tuz的博客
11-26 5260
问题： 原因： 当窗口缩小时，浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(1024px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的BUG。 解决方案： html, body { height: 100%; width: 100%; min-width: 1024 !import...
手机端css实现横向滚动但不显示滚动条
zuo-yiran的博客
03-12 5861
要实现手机端的横向滚动，但显示滚动条，如下图： 要实现滚动条消失，但是依然可以滚动，代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" cont
css解决fixed布局不会出现滚动条
全栈修炼
06-22 8079
css解决fixed布局不会出现滚动条的问题如果我们布局的是后是fixed并且想要高度为100%的时候，我们一般会这样设置： width: 100%; height: auto; z-index: 9999999; background: #fff; padding-bottom: 1rem; position: fixed; top: 0; overflow-y: scroll;...
1.解决使用 position: fixed；时内容被覆盖；2.vue2消除滑动条
m0_72686628的博客
06-22 1635
1.使用 position: fixed;固定定位时内容还是会被覆盖，就可以使用z-index增加层级（仅能在定位元素上奏效）2.第一步npm install less less-loader --save。第二步在App.vue中。
display 垂直居中
bangxionger9224的博客
06-12 376
/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-co...
解决ElementUI表格el-table-column添加fixed底部被遮挡的方法汇总
m0_37922443的博客
08-23 7958
解决ElementUI表格el-table-column添加fixed底部被遮挡的方法汇总
导航fixed定位，弹框出现后导航位置偏移（Vue+element ）
波客
06-02 814
因为导航是浏览器定位，页面有滚动条，所以宽度即使为100%也不是屏幕宽度。 当Element的弹框出现后，滚动条锁死，导航所在的页面滚动条消失，导航的宽度增加，所以会出现偏移的现象。 解决方法 ...
position:sticky解决position:fixed在窗口宽度过窄时显示不全
wsnd123321的博客
09-01 1279
position:sticky解决position:fixed在窗口宽度过窄时显示不全
CSS中使用position: fixed固定定位时遮挡下方内容
CssHero的博客
12-04 4697
通过设置padding-bottom或者z-index来解决固定定位的遮挡问题
CSS 固定导航栏（fixed）和粘性导航栏（sticky）
CyberPlayer的博客
02-22 2072
垂直式 水平式 注意：固定定位在移动设备上可能无法正常工作。 粘性式 注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见上面的例子）。 必须指定top、right、bottom或left至少之一，以使粘性定位起作用。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凡小多

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值