Question

所以我遇到以下问题：我想在网页上添加一个包含大量内容的侧边栏。所以侧边栏（div）应该是可滚动的，也应该在点击时隐藏。侧边栏的右侧是我的内容。内容应始终位于侧边栏的右侧，侧边栏不应覆盖内容的部分内容。

这是我的css：

div.sidebar {
    position: fixed; 
    float:left;
    left:0rem;
    top:0rem;
    bottom:1.2rem;
    width:21rem;
    background-color:rgb(110, 110, 110);
    z-index:999;
    overflow-y:scroll;
}
div.content {
    border-width: 0;
    margin: 2em;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;
    font-size: 180%;
    line-height: 130%;
}

如果css与位置相似：固定（或绝对），侧边栏可滚动且正文不滚动。但侧边栏隐藏了部分内容。
如果我删除＆＃34;位置：固定＆＃34;从.sidebar开始，内容在侧边栏右侧对齐，但侧边栏不再可滚动（现在整个页面都有一个滚动条）。指定溢出：隐藏的页面正文没有帮助。也没有删除任何左，顶部，底部，浮动等标签。我错过了什么？

如何实现可滚动但不覆盖内容的侧边栏。在此先感谢您的帮助！

Answer 1

我想我找到了一个解决方案：

将侧边栏的内容包装到第二个div并添加一些类属性 - .fixed在我的示例中。现在，我们将.fixed div固定，.sidebar div将占用空格，因此.content不会与.fixed重叠。请记住为.fixed和.content设置相同的宽度，因此它们占用相同的空间。现在，在.content div中设置width: auto，以便占用所有空格和overflow: hidden。

现在，当.sidebar有display: none时，修复将被隐藏，而.content将占用他们所有的空间：D

CSS：

div.sidebar {
    /* take space on the left */
    float:left;
    width:20%;
    margin-bottom:100%;

    background-color:rgb(0, 0, 0);
}

div.fixed {
    /* display fixed menu */
    position:fixed;
    width:20%;

    left:0rem;
    top:0rem;
    bottom:1.2rem;
    z-index:999;
    rgb(110, 110, 110)
    overflow-y:scroll;

}
div.content {
    width:auto; /* take all the space */
    overflow:hidden; /* try using without it and see what happens ;) */

    border-width: 0;
    background-color: transparent;
    font-size: 180%;
    line-height: 130%;
}

工作示例：http://jsfiddle.net/z8dqhrf2/2/

HTML / CSS：滚动div而不将位置设置为fixed或absolute

1 个答案: