7

我有一个 Bootstrap 3.0 导航栏，它始终在页面顶部可见，但这可能代表position属性为fixed.

<nav class="navbar navbar-default navbar-fixed-top" >

因为修复它会将其从文档流中移除，所以我需要向 body 元素添加一些填充，以便在页面首次显示时不会隐藏内容

body {
    padding-top: 70px;
}

问题是，当我单击菜单项导航到某个部分时，#About该部分的顶部被切断了。

jsFiddle

问：有没有办法添加填充，以便在导航到时看到整个项目？

4

2 回答 2

8

更新答案：

如this answer中所述，问题是，您的浏览器总是希望将您的锚点滚动到窗口的确切顶部。如果您将锚点设置在文本实际开始的位置，它将被菜单栏遮挡。

相反，将padding-top容器的 设置为您想要的偏移量，并将margin-top容器的设置为填充顶部的对面。现在容器的块和锚点从页面的最顶部开始，但里面的内容直到菜单栏下方才开始。

section {
    padding-top: 60px;
    margin-top: -60px;
}

jsFiddle

于 2013-09-22T20:43:01.170 回答
3

我会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;
}

看看我的小提琴

于 2013-09-22T20:48:21.767 回答