[英]How do I make scrollbar only at div content and not at entire body?
我有一个navbar和一个<div id='content'> 。 我的所有内容都在那个 div 中，当有很多内容时，滚动条会出现在主体上（将导航栏稍微推到一边），而不仅仅是在 div 内。 如何使滚动条仅在 div 内？
我试过设置overflow: 'hidden' for body和overflow: 'scroll' for #content selector 但它不起作用。
这是我用于测试的代码
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<title>Document</title>
<style>
body {
overflow: 'hidden';
}
#content {
background-color: gray;
overflow: 'scroll';
height: '100%'
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</div>
</nav>
<div id="content">
<div class="card mx-auto mb-5" style="width: 18rem;">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Content
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card mx-auto mb-5" style="width: 18rem;">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Content
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card mx-auto mb-5" style="width: 18rem;">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Content
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card mx-auto mb-5" style="width: 18rem;">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Content
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card mx-auto mb-5" style="width: 18rem;">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Content
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
</body>
</html>
像这样做你的造型。 我已将 body 和 html 限制为 100% 高度，这不会使 body 滚动，对于孩子，我使用了 flex 样式，根据父高度（假设 800px）对齐内容，使您的导航栏 60px（假设）和内容740 像素。 我在内容上添加了溢出，使内容滚动。
html, body { height: 100%; } body { display: flex; flex-direction: column; } #content { background-color: gray; overflow: auto; }
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-md navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> </ul> <button class="btn btn-outline-success" type="submit">Search</button> </div> </div> </nav> <div id="content"> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card mx-auto mb-5" style="width: 18rem;"> <div class=" card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Content </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div>
这里是沙箱
我如何使此滚动仅移动容器div而不是整个主体
[英]how do I make this scroll only shift the container div instead of the entire body
如何只提取包含整个HTML页面的Ajax响应的body标记内的内容？
[英]How do I pull out only the content within the body tag of an ajax response that contains an entire HTML page?
通过ajax加载内容后，如何在div的顶部制作水平滚动条？
[英]How do I make a horizontal Scrollbar at the top of the div Work after the content has been loaded via ajax
可滚动的div，在出现的滚动条上跳内容（！not！html或body）（并且仅使用CSS）
[英]scrollable div, jumping content on appearing scrollbar (!not! html or body) (and only with css)
如果我在可见视口内的网站中有内容，而正文中没有滚动条，如何更改高度？
[英]How do I change height if I have content in a website within a visible viewport, no scrollbar in body?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.