当视图小于内容时滚动静态内容

Question

这可能比制作它简单得多，但我很难搞清楚这一点。

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

.scrollable {
    overflow: auto;
}

你们有没有人帮我解决这个问题？

以下是jsfiddle（请注意，并非所有CSS和代码都包含在内 - 但我认为此问题所需的功能已包含在内。

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

Answer 1

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

然后你需要指定一个高度，以便在空间不足时正确的内容会溢出。

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

Demo