粘性顶部导航创建滚动条

ArmenB

我有一个页面,该页面的顶部有一个粘性导航栏,并且导航栏的高度设置为50px,并使用50px的padding-top推送了正文,但是现在页面有了滚动条。如何摆脱滚动条?

jsfiddle页面

这是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;
}
丹尼

使用属性框大小

装箱尺寸:边框

要使padding的值包含在的值内height

更新的演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

滚动条上的粘性导航栏

来自分类Dev

Bootstrap固定顶部导航栏与垂直滚动条重叠

来自分类Dev

Bootstrap固定顶部导航栏与垂直滚动条重叠

来自分类Dev

粘性页脚添加滚动条

来自分类Dev

粘性导航并滚动到顶部混乱

来自分类Dev

当导航栏固定在滚动条顶部时,添加品牌徽标和li

来自分类Dev

标题顶部的jqGrid水平滚动条

来自分类Dev

检测div滚动条到达顶部

来自分类Dev

html顶部的水平滚动条

来自分类Dev

需要帮助在滚动条上制作粘性导航栏-在Node.js / Express中使用Jade和Stylus

来自分类Dev

引导导航栏与滚动条合拢

来自分类Dev

如何在水平滚动条上使用位置粘性?

来自分类Dev

如何在div上创建两个滚动条作为顶部和底部?

来自分类Dev

如何在div上创建两个滚动条作为顶部和底部?

来自分类Dev

jQuery检测div滚动条滚动到顶部

来自分类Dev

移动导航菜单仅在Windows上创建额外的空间和滚动条

来自分类Dev

使用粘性导航滚动到div(基础顶部栏)

来自分类Dev

Bootstrap 粘性顶部导航栏在滚动时消失

来自分类Dev

水平滚动条页面导航和垂直滚动条

来自分类Dev

排序后滚动条重置到treeView的顶部吗?

来自分类Dev

jQuery位置DIV固定在滚动条的顶部

来自分类Dev

伪元素水平滚动条位于div的顶部

来自分类Dev

如何从元素的底部到顶部更改滚动条位置?

来自分类Dev

在轴和滚动条顶部显示工具提示

来自分类Dev

错误滚动条:未定义顶部

来自分类Dev

SplitContainer中的顶部ListView不会添加垂直滚动条

来自分类Dev

是否可以在滚动条顶部添加文本?

来自分类Dev

jQuery位置DIV固定在滚动条的顶部

来自分类Dev

在水平滚动条上显示固定宽度的顶部栏

Related 相关文章

热门标签

归档