![](/img/trans.png)
[英]how do I make this scroll only shift the container div instead of the entire body
[英]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>
這里是沙箱
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.