我有一个 Bootstrap 3.0 导航栏，它始终在页面顶部可见，但这可能表示position属性fixed的任何内容。
<nav class="navbar navbar-default navbar-fixed-top" >
因为修复它会将其从文档流中移除，所以我需要向 body 元素添加一些填充，以便在首次显示页面时不会隐藏内容
body {
padding-top: 70px;
}
问题是，当我单击菜单项导航到某个部分（例如#About）时，该部分的顶部被切断。
js小提琴
问：有没有办法添加填充，以便在导航到时看到整个项目？
更新的答案：
如本答案中所述，问题是，您的浏览器始终希望将锚点滚动到窗口的确切顶部。如果您将锚点设置在文本实际开始的位置，它将被菜单栏遮挡。
相反，请将容器的padding-top设置为所需的偏移量，并将容器的margin-top设置为与填充顶部相反。现在，容器的块和锚点从页面的确切顶部开始，但里面的内容直到菜单栏下方才开始。
section {
padding-top: 60px;
margin-top: -60px;
}
js小提琴
我会在
正文上设置overflow: hidden并将您网站的内容添加到可滚动元素中。
您的布局应如下所示：
<html>
<head></head>
<body>
<div class="navbar"></div>
<div class="wrap">
<!-- rest of content for site -->
</div>
</body>
</html>
添加以下 CSS 规则：
html, body {
overflow: hidden;
height: 100%;
}
body {
padding-top: 50px;
}
.wrap {
height: 100%;
overflow: auto;
}