粘性顶部导航创建一个滚动条答案

【问题标题】：sticky top nav creates a scrollbar粘性顶部导航创建一个滚动条
【发布时间】：2014-12-24 06:36:39
【问题描述】：

我有一个顶部带有粘性导航栏的页面，我将导航栏的高度设置为 50 像素，并使用 50 像素的 padding-top 推动正文，但现在页面有一个滚动条。如何摆脱滚动条？

这里是 HTML：

<body>
    <div class="container">
        <!-- Navigation bar section -->
        <nav class="navbar-fixed-top" role="navigation">
            <div class="navbar-header"> <a class="navbar-brand" href="#">Project name</a>

            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav">
                    <li><a href="#">Tutorials</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!--/.container-->
</body>

和 CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    padding-top: 50px;
}
/* top navigation bar 
 * ------------------ */
 .navbar-fixed-top {
    top: 0px;
    position: fixed;
    right: 0px;
    left: 0px;
    z-index: 1030;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid black;
    background: white;
    display: block;
    clear: both;
}
.navbar-header {
    float: left;
    padding: 15px;
    background-color: lightblue;
    clear: both;
}
.navbar-brand {
    font-size: 18px;
    line-height: 20px;
}
.navbar-collapse {
    float: left;
    background-color: #FF9933;
}
.navbar-nav {
}
.navbar-nav > li {
    float: left;
    display: block;
}
.navbar-nav > li > a {
    line-height: 20px;
    position: relative;
    display: block;
    padding: 15px;
}

【问题讨论】：

纯粹出于好奇，您为什么要尝试重新发明 Bootstrap CSS？
@TimLewis 仅仅因为他使用自己的 CSS 吗？ Bootstrap 只是某些情况下的工具。
@Danko 我同意，奇怪的是他完全了解 Bootstrap 的语法，但仍在尝试使用他自己的 CSS。同样，只是一个观察。
@TimLewis：我想非常具体地定制我的网站，看看引导 css 有多么庞大，但我应该从头开始。我正在研究 bootstrap，并尝试通过获取我需要的部分来了解他们是如何做事的，并在此过程中学习了很多关于 CSS 的知识。
@ArmenB。有趣的方法。请确保查看 Bootstrap.css 而不是 .min.css 版本。

标签： html css navbar

【解决方案1】：

使用属性box-sizing

box-sizing:border-box

使填充的值包含在height 的值中。

UpdatedDemo

【讨论】：

我开始意识到创建 CSS 本身就是一项全职工作。谢谢你的工作！
@ArmenB 很高兴为您提供帮助

【解决方案2】：

推动正文推动窗口显示的所有内容（文档）。我不推荐它。

创建一个名为 space 的 div 并将其高度设置为 50px 可以解决此问题：所以...

CSS：

   .space {
      height: 50px;
      width: 100%;
    }

HTML：

<div class="space"></div>

然后你可以多次使用它。将 div 放在导航之后。

【讨论】：

我不太清楚如何使用这个类。
感谢您的回答，但我很难理解您的意思。
抱歉没有解释。固定元素基本上会占用它的空间并将其下方的元素移动到页面上。因此，添加一个占据固定元素空间的 div 会将其他元素移回其原始位置。
好的，我试过了，它有点工作，但是当我下面有额外内容时，滚动条仍然弹出。