css - サイズ変更可能なコンテナーとして、左側に固定 div を保持し、右側に相対 div を保持する方法

Question

私は2つのコンテナを持っています。どちらも相対的で、どちらもフロートライトに設定されています。私の目標は、左のコンテナが画面の 100% の高さを固定位置に与えることです。しかし、私がそれを行うと、他のすべての要素が壊れてしまいます. 提案をよろしくお願いします。

http://jsfiddle.net/VpxeC/3/

<div class="outleftcontainerunder">
</div>


<div class="maincontainer">
    <div class="innermaincontainer">
        <div class="articlebutton"></div>
        <div class="discussionbutton"></div>
        <div class="editbutton"></div>
        <div class="searchbar"></div>
    </div>
</div>

    body
    {
        margin: 0;
        padding: 0;
    }

    .outleftcontainerunder
    {
        width: 175px;
        height: 250px;
        background: green;
        float: left;
        position: relative;
    }

    .maincontainer
    {
        width: calc(100% - 175px);
        height: 1000px;
        float: left;
        position: relative;
    }

Answer 1

これをチェックしてください: jsFiddle Demo

.outleftcontainerunder
{
    width: 175px;
    top: 0;
    bottom: 0;
    background: green;
    left:0;
    position: fixed;
}

これも変更しました：

.maincontainer
{
    float: right;
}