我尝试了一些建议，例如从正文中删除溢出、向 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 回答
陪伴而非守候
TA贡献1757条经验 获得超8个赞
您希望标题始终位于顶部，但不覆盖您的内容，对吗？如果我猜对了，那么您需要做的就是更改主要内容包装器，即 #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
TA贡献1796条经验 获得超4个赞
因为您正在使用 bootstrap，所以我将您链接到我的 jsfiddle，它应该适合您。无需 css 或 js，bootstrap 将为您完成工作
JSFIDDLE: https://jsfiddle.net/9yeb023u/1/
蝴蝶刀刀
TA贡献1801条经验 获得超8个赞
标题是粘性的，正文内容始终位于标题下方。
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;
}
添加回答
举报
0/150
提交
取消