“粘性”侧边栏垂直溢出答案

【问题标题】："Sticky" sidebar overflowing vertically“粘性”侧边栏垂直溢出
【发布时间】：2015-02-18 14:51:14
【问题描述】：

我们的页面上有一个粘性侧面板，使用以下非常简单的 CSS 实现：

position: fixed;
top:62px;
bottom:10px;

top 和 bottom 属性在哪里创建所需的边距。

问题是这个面板包含几个手风琴风格的元素，扩展其中一些会导致内容溢出屏幕底部并变得不可见/不可访问。在上面的 css 样式中添加overflow:auto; 规则几乎可以解决问题，方法是插入一个允许用户垂直滚动以查看可能隐藏的内容的滚动条。然而，这会导致两个滚动条——一个用于主导航，一个用于侧边栏——感觉很笨拙且不直观。相反，我想让“固定”元素在溢出时与主滚动条一起滚动。我知道这实际上会使它 not 成为固定元素，因此恐怕我将不得不求助于 JS 来实现这一点 - 但有没有人有更清洁的 html/css-处理这个的唯一方法？

【问题讨论】：

那么，这是关于 div 中的 div 吗？
@JeanGkol 是一个div里面的一个div，没错。
你使用引导程序吗？第一个div里面的面板吗？你需要什么？固定位置还是相对位置？
你会遇到各种各样的头痛，试图在固定/不固定之间跳转。也许您可以依靠 javascript 解决方案来滚动 div 并使用辅助边栏作为后备。
@JeanGkol - 是的，我们确实使用引导程序。侧面板直接位于父容器内。最初固定是最有意义的，但如果你有一个基于相对的解决方案，我一定会尝试一下。

标签： html css

【解决方案1】：

我不确定这是您需要的，但希望它对您有所帮助。

#container1 {
    height: 400px;
    width: 200px;
    overflow: hidden;
    position: fixed;
    top: 62px;
    bottom: 10px;
    background: #888;
}

#container2 {
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 20px; /*Adjust this for cross-browser compatibility */
}

#container2 ul li {
    height: 300px;
}

html, body {
    height: 99%;
    overflow:hidden;
}

<div id="container1">
    <div id="container2">
        <ul>
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
        </ul>
    </div>
<div>

JSFiddle

您也可以在 chrome 中试用：

::-webkit-scrollbar { 
     display: none; 
}

但是这个 sn-p 只能在 chrome 中工作，所以我宁愿使用上面的。

【讨论】：

【解决方案2】：

让我试着帮忙。使用Panel-body class selector 来处理这个问题。首先你应该做很多事情，比如div的宽度和第二个div。您可以按如下方式隐藏滚动条：

.panel-body {
    height:300px;
    overflow:auto;
    margin-right:0px; // when it shows scrollbar, you need to set it MINUS.
}

其次，当浏览器窗口被用户调整大小时，您还需要注意，您需要管理与 div 宽度相关的媒体查询。

这是DEMO。

【讨论】：