html - 滚动条延伸过去的页面
问题描述
我有一个引导列表组的滚动条。我用 flexbox 让页面占据了 100% 的视图，因为它将是一个单页网站。滚动条延伸到视图之外，页面正在使用 html / body 滚动条。
我已经尝试过这些问题，但他们的答案没有奏效。
html,
body {
height: 100%;
overflow: hidden;
}
.min-100 {
min-height: 100%;
}
.sideBar {
overflow-x: hidden;
overflow-y: scroll;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.min-100 {
min-height: 100%;
}
.sideBar {
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 d-none d-md-flex">
<div class="col px-0 list-group list-group-flush h-100 sideBar">
<a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
You<br>
<small class="fw-light text-muted text-truncate d-block">This is a status</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
</div>
<div class="col-8 px-0 bg-warning">
3
</div>
<div class="col px-0 bg-danger">
4
</div>
</div>
</div>
</body>
</html>注意：页面在小型设备上是隐藏的，因此您可能需要扩展布局。
解决方案
您不需要所有的 flex 类。将容器和行的高度设置为 h-100 (100%)，其余的应该可以工作：
html,
body {
height: 100%;
overflow: hidden;
}
.sideBar {
overflow-x: hidden;
overflow-y: auto;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100">
<div class="row h-100 d-none d-md-flex">
<div class="col px-0 list-group list-group-flush h-100 sideBar">
<a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
You<br>
<small class="fw-light text-muted text-truncate d-block">This is a status</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
<a class="list-group-item text-dark p-3">
<div class="d-inline-block float-start position-relative me-3">
<img class="" alt="User" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-warning p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
User<br>
<small class="fw-light text-muted text-truncate d-block">This is a template user.</small>
</div>
</a>
</div>
<div class="col-8 px-0 bg-warning">
3
</div>
<div class="col px-0 bg-danger">
4
</div>
</div>
</div>推荐阅读
- javascript - Redis流命令传递带有解析值的消息
- python - 错误：函数“AddmmBackward”在其第二个输出中返回了 nan 值
- javascript - 如何使用 HttpServletResponse setHeader() 从控制器向目标 HTML 页面发送重定向参数
- .net-core - 如何在 IHost 启动时运行同步任务
- python - 如何使用 Python Selenium
- web - 如果我将它分配给新的实例/IP，域年龄会重新计算吗？
- node.js - 将数据传递给部分快递 js hbs
- apache - 从nginx到Apache如何实现这个配置
- django-templates - 使用离线压缩+模板继承的Django错误解析模板
- javascript - 使用 javascript 创建文本模式