css - 有一个固定位置的 div，如果内容溢出则需要滚动

Question

我实际上有两个问题，但让我们先解决主要问题，因为我认为另一个更容易解决。

我在菜单滚动的左侧有一个固定位置的 div。右侧是一个可以正确滚动的标准 div。问题是当浏览器视口(viewport)太小而看不到整个菜单时.. 没有办法让它滚动我能找到的(至少不能用 css)。我试过在 css 中使用不同的溢出，但没有任何东西使 div 滚动。包含菜单的 div 设置为 min-height:100% 和 position:fixed.. 我需要保留这两个属性。

包含菜单的 div 位于另一个绝对定位且高度设置为 100% 的包装 div 中。

如果内容对于 div 而言太高，我如何让它垂直滚动？

这让我想到了另一个问题，我不想显示滚动条..但我想我可能已经有了答案(只是它还没有用，因为我无法获得div 开始滚动)。

有什么解决办法吗？也许需要javascript？ (对此我知之甚少)

JS Fiddle Example

以及导致问题的相关代码(因为在这里发布整个内容太长了):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

还尝试添加 height:100% 以查看这是否是一个问题，但它也不起作用......也没有固定高度，例如 600px。

Answer 1

使用 height:100% 的问题在于它将成为页面的 100%，而不是窗口的 100%(正如您可能期望的那样)。这将导致您看到的问题，因为非固定内容足够长以包含 100% 高度的固定内容，而无需滚动条。浏览器不知道/不在乎您实际上不能向下滚动该栏以查看它

您可以使用fixed 来完成您想要做的事情。

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

你的 fiddle 的这个分支显示了我的修复: http://jsfiddle.net/strider820/84AsW/1/