Question

我有两个容器都是相对的，两个都是浮动的。我的目标是，左侧容器给出100％的屏幕高度并处于固定位置。但是当我这样做时，所有其他元素都会被打破。建议不胜感激。

<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 Demo

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

还修改了这个：

.maincontainer
{
    float: right;
}

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

2 个答案: