css - 如何将左侧的固定 div 和右侧的相对 div 保持为可调整大小的容器

Question

我有两个容器都是相对的，并且都设置为浮动。我的目标是，左侧容器提供 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

如果您删除左侧容器上的浮动，并将主容器向右移动，它应该可以按照我认为的方式工作。

见：http: //jsfiddle.net/VpxeC/2/

.outleftcontainerunder /*I want this div to be in position fixed and height as 100% of the screen. But when I do it, there is a chaos*/
{
  width: 175px;
  height: 250px;
  background: green;
  position: fixed;
  height: 100%;
 }

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

Answer 2

看看这个：jsFiddle 演示

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

还修改了这个：

.maincontainer
{
    float: right;
}