html - 当 View 小于内容时滚动静态内容

Question

这可能比我做的要简单得多，但我很难弄明白。

我有一个网页，左侧显示联系人列表，右侧显示所选联系人信息的静态预览。顶部的菜单也是静态的。目前，它“几乎”正常工作。当我使用鼠标滚动按钮或屏幕滚动条滚动时，左侧的联系人列表会滚动，而联系人预览和菜单保持静止。但是，我希望右侧部分仅在屏幕太小而无法显示预览的全部内容时滚动。我使用了“溢出:自动”和“溢出:滚动”但没有成功。

.scrollable {
    overflow: auto;
}

你们能帮我解决这个问题吗？

这是 jsfiddle(请注意，并非所有 CSS 和代码都包含在内 - 但我认为包含了这个问题所需的功能。

http://jsfiddle.net/84BM8/7/

Answer 1

首先你需要隐藏html和body的溢出。

然后你需要指定一个高度，让右边的内容在空间不够的时候溢出。

.rightSection {
    width: 45%;
    float: right;
    height:500px;
}

Demo