html - 左のコンテンツをフロートさせ、右のコンテンツを修正する方法は?

Question

上部のナビゲーションを固定し、左のナビゲーションをスクロール可能にし、右のナビゲーションを固定する構造に取り組んでいます。

ここでフィドルを作成しました。CSSのヘルプが必要です。

http://jsfiddle.net/PxbX9/

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    float:left;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    .fixed-block {
        postion:fixed;
        height:1000px;
    }

Answer 1

これは、次のように再構築することで実現できますCSS。

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    display: inline-block;
    float:right;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    position:fixed;
}

セレクターのみをCSS変更しました#right-block。

1. (should be ).fixed-blockの形式でタイプミスがあったclass を削除しました。postionposition
2. position: fixed;#right-blockセレクターに追加されました。
3. display: inline-block;float: right;も追加されています。

デモ

お役に立てれば。

Answer 2

そのワーキングフィドルを見てください

純粋な CSS ソリューション、非常に動的、完全にレスポンシブ。

HTML:

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="RightContent">
            </div>
            <div class="LeftContent">
            </div>
        </div>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.Header
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}
.Wrapper > div
{
    height: 100%;
    overflow: auto;
}

.LeftContent
{
    /*for demonstration only*/
    background-color: #90adc1;
}
.RightContent
{
    float: right;
    width: 500px;
    /*for demonstration only*/
    background-color: #77578a;
}