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

Question

我最近发现混合流动和固定布局是非常困难的，所以当我终于找到解决一个我已经沉寂了一段时间的问题时，我无法抗拒，只好与过去对我帮助很大的社区。​​p>

我想要以下外观：

动态空间是指它应该非常类似于将“margin:0 auto;”CSS 规则应用于包含 div 的情况，元素左右的空白区域就是示例中的“动态空间”。

我有 6 个要求：

1. 必须响应迅速。
2. 容器的最大宽度必须为 960 像素，并且始终需要居中。
3. 必须在 IE8 及更高版本上工作。
4. 左侧的动态空间必须具有不同的高度，并包含不同的颜色。
5. 右侧的动态空间必须与容器高度相同，但颜色不同。
6. 必须使用 Twitter Bootstrap。

Answer 1

此时我挣扎了 3 天，我尝试了从 css 表格单元到使用引导列的所有方法（都没有成功）。

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

所以此时我有以下内容：

JSFIDDLE DEMO

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

让我那绝妙的数学大脑开始思考：

如果我的包含元素将始终为 960px，并且我需要左侧的 div 为 50% 以保持在同一位置，如果我简单地采用 960/2 = 480px 并简单地应用 margin:-480px。

效果非常好……直到您将屏幕缩小到大约 768 像素，所以添加一个媒体查询，将其更改为 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;
  }
}

我希望这对某人有所帮助，抱歉这么久只是想尽可能清楚地解释逻辑。