如何使用固定标题和居中内容修复正确的列

Question

有关布局的示例，请参阅http://jsfiddle.net/Zz4EF/1/。为了测试目的，我用相同的基本图像替换了所有图像。

布局使用全宽标题和居中内容，最大宽度为1440px。我希望正确的列（aside标识为sidebar）保持固定，而左列（内容列）会自然滚动。

正如你从jsFiddle中看到的那样，除了左列滚动的事实之外，我还有其他所有内容。我不能在右栏上使用position: fixed，因为我不知道屏幕的总宽度（包装器最大为1440px，但是主体宽度可能更大）所以我不知道要放入哪些数字{{ 1}}，top，left或right定位。

如果可能的话，我正在寻找没有javascript的解决方案。

编辑2013-09-09 ：在尝试了很多事情并询问了很多人后，我认为唯一的方法是使用Javascript，这不是我想要的路径特殊案例。我已经决定改变我的设计以获得更简单的东西，但是如果有人拥有纯CSS解决方案，我会将问题保持打开状态。

Answer 1

这是你想要的？的 Fiddle

我创建了一个新的例子（这意味着我没有使用你的例子），因为你的代码是混乱的=）（不是冒犯）。

<强> HTML

<header></header>
<section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
</section>
<aside></aside>

<强> CSS

header {
    padding: 50px;
    background: blue;
}

section {
    width: 75%;
    height: 95%; /* For browsers that doesn't support calc function */
    height: calc(100% - 50px);
    float: left;
    background: orange;
    padding: 1em;
    overflow: auto;
}

section > article {
    margin: 1em 0;
    padding: 100px;
    border: 1px solid black;
    background: white;
}

aside {
    height: 100%;
    width: 25%;
    position: fixed;
    top: 0;
    right: 0;
    background: red;
    z-index: -1;
}

其余的CSS代码有点“ CSS重置”。

干杯， 莱昂纳多

---

编辑：我已编辑 Fiddle 。