html - 混合流体和固定布局-填充动态空间

我最近发现很难混合固定布局和固定布局，因此，当我终于想出一个解决方案时，我已经安静了一段时间，我无法抗拒，只好与有社区的人分享过去对我有很大帮助。

我想要以下外观：



通过动态空间，我的意思是应该非常像将“ margin:0 auto;” CSS规则应用于包含div的元素时，该元素左右两侧的空白在示例中为“动态空间”。

我有6个要求：


必须有所反应。
容器的最大宽度必须为960px，并且始终需要居中。
必须开发IE8及更高版本。
左侧的动态空间必须具有不同的高度，并包含不同的颜色。
右边的动态空间必须具有与容器相同的高度，但必须具有不同的颜色。
必须与Twitter Bootstrap一起使用。

最佳答案

在这一点上，我奋斗了3天，尝试了从CSS表单元到使用引导列的所有方法（均未解决）。

我还意识到，使div在大屏幕尺寸上处于“相同”位置的唯一方法是将其设置为50％。

因此，在这一点上，我有以下几点：

JSFIDDLE DEMO

很好，唯一的问题是红色在容器元素的下方突出了。

这样我的奇妙一点都没有数学大脑开始思考：

如果我的包含元素将始终为960px，并且我需要左侧的div为50％才能保持在同一位置，那么如果我只是将960/2 = 480px并简单地应用了margin:-480px怎么办。

在将屏幕缩小到大约768px之前，效果非常好。.因此添加一个媒体查询，将其更改为margin-left:-370px;。

终于成功了！这是最终代码：

JSFIDDLE DEMO

和HTML：

<div class="" style="background: #000099; position: relative">
    <div class="left">l</div>
    <div class="container" style="background: #002500">contain</div>
</div>

最后的CSS：

.container {
    max-width: 960px;
    z-index: 1;
    position: relative;
    padding:0;
}
.left {
    position: absolute;
    left: 0;
    width: 50%;
    z-index: 1;
    background: red;
    height: 50px;
    margin-left:-480px;
}

@media (min-width: 768px) {
  .left {
    margin-left:-375px; /*I Used -370 but for some reason it doesn't work now*/
  }
}

@media (min-width: 992px) {
  .left {
    margin-left:-480px;
  }
}

希望对大家有帮助，对不起，这么久以来它一直想尽可能清楚地解释逻辑。