Kyl*_*Mit 5 html navigation twitter-bootstrap
我有一个Bootstrap 3.0导航栏,它总是在页面顶部可见,但这可以代表该position属性的任何内容fixed.
<nav class="navbar navbar-default navbar-fixed-top" >
因为修复它会将其从文档流中取出,所以我需要在body元素中添加一些填充,以便在首次显示页面时不隐藏内容
body {
padding-top: 70px;
}
问题是,当我单击一个菜单项导航到一个部分时,就像#About那时该部分的顶部被切断一样.
问:有没有办法添加填充,以便在导航到导航时可以看到完整项目？
如本回答所述,问题是,您的浏览器总是希望将锚点滚动到窗口的正确顶部.如果您将锚点设置为文本实际开始的位置,则菜单栏会将其遮挡.
相反,将padding-top容器设置为所需的量偏移量,margin-top将容器设置为填充顶部的相反值.现在容器的块和锚点从页面的正确顶部开始,但内部的内容直到菜单栏下方才开始.
section {
padding-top: 60px;
margin-top: -60px;
}
我会在主体上设置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;
}