带有侧边栏的单滚动网页

Question

如何将以下示例的页面内容http://jsfiddle.net/cq8dC/放置在nav侧边栏的右侧，而不是放在后面？

Answer 1

更新样式。将样式padding-left: 255px;添加到 .horizo​​ntal

.horizontal 
{
    display: inline-block;
    padding-left: 255px;
    vertical-align: top;
    white-space: normal;
    width: 100%;
}

<强> DEMO

Answer 2

jsFiddle Demo

首先，您应该在内容中添加容器。我称之为#Content。

然后我将这些样式添加到CSS：

body {
    overflow: hidden;
}
#Content {
    left: 240px;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    overflow: scroll;
}

这使得#Content占据了页面中的静止位置，并且可以单独滚动。

---

此外，我已更新 JavaScript

root现在是#Content元素，我使用的是position()而不是offset()。我这样做是因为 position（） Get the current coordinates of the first element in the set of matched elements, relative to the offset parent（来自文档）。