0

レイアウトの例については、http://jsfiddle.net/Zz4EF/1/を参照してください。テスト目的で、すべてのイメージを同じ基本イメージに置き換えました。

レイアウトは、全幅のヘッダーと、最大幅 1440px の中央に配置されたコンテンツを使用します。左の列（コンテンツ列）が自然にスクロールしている間、右の列（ asidewith id ）を固定したままにしたいと思います。sidebar

jsFiddle からわかるように、右の列が左の列のようにスクロールしているという事実を除いて、私はすべてを持っています。position: fixed画面の合計幅がわからないため（ラッパーは最大1440pxですが、本体の幅はもっと大きくなる可能性があります）、右の列でtopはleft使用できませrightんbottom。

可能であれば、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 に答える