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

Question

我最近发现混合流体和固定布局是非常困难的，所以当我终于想出一个问题的解决方案我已经安静一段时间了，我忍不住要分享它与过去曾帮助过我的社区。

我想要以下内容：

通过动态空间我的意思是它应该非常类似于将“margin:0 auto;”CSS规则应用于包含div时，元素左侧和右侧的空白区域是示例中的“动态空间”

我有6项要求：

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

Answer 1

此时我挣扎了3天，我尝试了从css table-cells到使用bootstrap列的所有内容（都没有用完）。

我也意识到在＃34;同一＆＃34;中使用div的唯一方法在巨大的屏幕尺寸上的位置是50％。

所以此时我有以下内容：

JSFIDDLE DEMO

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

所以我的精彩不是所有的数学大脑开始并且想：

如果我的包含元素总是960px并且我需要我左边的div为50％才能保持在同一位置，如果我只是采用960/2 = 480px而只是应用margin:-480px。 / p>

效果非常出色..直到您将屏幕缩小到约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;
  }
}

我希望这会帮助某人，很抱歉，它只是想尽可能清楚地解释逻辑。