所有正文内容在导航中上下移动（HTML 和 CSS）
我尝试了一些建议，例如从正文中删除溢出、向 header 和 padding-top 添加 z-index 但似乎没有任何效果。
一开始它工作得很好，但后来我实现了很多 Lorem Ipsum 文本。所有内容都只是在导航栏上方和下方滑动。我附上了一个 JS 小提琴来解释。
我尝试了全身溢出并尝试了固定/相对标题位置。什么都不起作用。
任何意见都会非常感激。
我希望得到一些帮助，帮助我如何使导航保持固定，但当我向下滚动时却不能真正保持固定。
当然还有如何让内容不水平溢出。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, width=device-width shrink-to-fit=no">
<title>Hello! </title>
</head>
<body>
<div class="empty"></div>
<div class="all">
<div class="menu-wrapper">
<header class="header">
<a href="#home">Logo</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="#">More</a></li>
<li><a href="#">More2</a></li>
</ul>
</header>
</div>
</div>
<div class="row">
<div class="container-fluid" id="about">
<h5>Text</h5>
<div class="col-lg-12">
<article>
<br>
<br>
<br>
</p>
</article>
</div>
</div>
</div>
千万里不及你3回答
-
陪伴而非守候
您希望标题始终位于顶部，但不覆盖您的内容，对吗？如果我猜对了，那么您需要做的就是更改主要内容包装器，即 #about 元素，您只需要让这个元素可滚动，而不是整个页面。为此我建议这个CSS：#about {max-width: 100%;position:relative;top:100px;border: 5px solid purple;padding: 20px;text-align: center;justify-content: center;height:100px;overflow:scroll;}所以在这里我们将位置更改为相对位置，这样我们就可以将内容向下移动导航的高度（top：100px）然后我们限制该组件的高度（height：100px）并使其可滚动（overflow：scrool） - 这样你就可以滚动，当你这样做时 - 你滚动内容，而不是整个页面，所以固定位置的导航栏保持在顶部这是小提琴 - https://jsfiddle.net/t2a4938f/12/我设置了近似值，您可以尝试一下以获得更好的视图更新如果您希望内容占据屏幕的整个高度（不限于上面的严格高度 - 100px），您可以使用 height:100vh -
慕的地8271018
因为您正在使用 bootstrap，所以我将您链接到我的 jsfiddle，它应该适合您。无需 css 或 js，bootstrap 将为您完成工作JSFIDDLE: https://jsfiddle.net/9yeb023u/1/ -
蝴蝶刀刀
标题是粘性的，正文内容始终位于标题下方。h.header { width: 100%; top: 0; position: sticky; background-color: black;}#about { max-width: 100%; border: 5px solid purple; padding: 20px; text-align: center; justify-content: center;}
随时随地看视频慕课网APP
相关分类
JavaScript