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

如果您移除左侧容器上的 float ，并将主容器移动到右侧，它应该按照我认为您想要的方式工作。

参见: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;
}