0

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

布局使用全角标题和居中内容，最大宽度为 1440 像素。我希望右列（aside带有 id sidebar）保持固定，而左列（内容列）自然滚动。

正如您从 jsFiddle 中看到的那样，除了右列像左列一样滚动这一事实之外，我拥有一切。我不能position: fixed在右列使用，因为我不知道屏幕的总宽度（包装最大为 1440 像素，但主体宽度可能更大），所以我不知道要放入什么数字,top或left定位。rightbottom

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

编辑 2013-09-09：在尝试了很多事情并询问了很多人之后，我认为唯一的方法是使用 Javascript，这不是我想针对这种特殊情况采取的方法。我决定将我的设计更改为更简单的东西，但如果有人有纯 CSS 解决方案，我会留下这个问题。

4

1 回答 1

0

这就是你想要的？小提琴。

我创建了一个新示例（这意味着我没有使用您的示例），因为您的代码一团糟=）（不是冒犯）。

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。

于 2013-09-06T21:54:53.737 回答