Question

我有一个固定的导航栏运行我的网站的长度，但刚才它有自己的滚动条，所以当我滚动网站的主体，导航栏是静态的，只有滚动，如果我物理滚动在导航栏本身。

这只是'position：fixed;'的结果吗？或者我在CSS中遗漏了什么？

body {
    margin: 0;
    padding: 0;
    color: #555;
    font: normal 1.3em Arial,Helvetica,sans-serif;
    background-color: #FAFAF0;
    font-family: "proxima-nova",sans-serif;
    display: block;
}
/*NAVBAR*/
    #sidebar-wrapper {
        position: fixed;
        background: #2C4649;
        z-index: 1000;
        left: 0px;
        height: 100%;
        margin-left: 0px;
        border: none;
        display: block;
        -moz-border-radius: 0;
        -o-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
/*PAGE CONTENT TO THE RIGHT OF NAVBAR*/
#page-content-wrapper {
    margin-top: 20px;
    overflow: hidden;
    margin-left: 130px;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow-y: auto;
}

是否有人知道如何解决此问题，因此网站的完整高度取决于导航栏内容或页面内容 - 而不是单独的可滚动项目？

由于

Answer 1

不完全确定您之后的内容，但这里有一个例子fiddle。

我所做的就是这条规则：#sidebar-wrapper{overflow-y:hidden;}将删除固定元素中的任何滚动条。这意味着如果导航栏中的内容太多，它将被切断且不可见（因此＆＃34;隐藏＆＃34;）。如果您已经在固定导航栏中遇到滚动条，则表示您的内容太多，因此这可能不是您的最佳解决方案。

然后我添加了固定宽度的侧边栏以匹配内容的边距偏移。

CSS HTML使div滚动到内容的高度

1 个答案: