html - 粘性侧边栏在 Firefox 中没有正确的顶部空间
问题描述
我无法使用 Firefox 显示整个侧边栏。正如您从图像中看到的那样,它接缝不能从顶部正确地间隔,隐藏了第一个项目!
这是CSS:
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
top: 48px; /* Height of navbar */
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #999;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
这是引导模板之一的一部分!
预先感谢您的帮助!
解决方案
因为它在网格内并使用响应式类,所以当您使窗口变小或变大时,“间距”会发生变化。
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">...</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
...
</main>
</div>
推荐阅读
- entity-framework-core - 实体类型 HashSet
使用 RemoveRange 时未找到 - javascript - VueJS Web 应用程序中的 Google Maps API 弃用错误:utc_offset 自 2019 年 11 月起弃用,并将于 2020 年 11 月关闭
- php - 在 Yii2 框架中使用 ActiveForm 的文件上传字段不起作用
- opencv - OpenCV 编码为 H264 更改灰度图像的原始 RGB 像素值
- sqlite - sqlite 时间码计算
- networking - 在 GCP 项目之间设置 VPN 以访问 SQL 引擎子网
- c# - .Net Core 3.1 Process.Start("www.website.com") 在 WPF 中不起作用
- aws-lambda - AWS:帮助在 Codepipeline 中设置 CodeDeploy
- kubernetes - 重命名现有的 k8s 静态 ip 地址 - 创建静态 ip 时的静态与区域
- python - 如何在 DataFrame 中按序列分组