css - 从固定点拉伸(stretch)到 window 两侧

我对此设计有疑问。首先，它看起来很简单：左列的宽度为25％，右列的宽度为75％。但是，这仅在宽度为1140px的中央“容器”中。在更大的屏幕上，它变得更加困难。


左列需要延伸到窗口的最左侧。
左列的内容（但不是背景色）始终保留在该1140px容器内。
右列需要延伸到窗口的最右侧。
右列的内容延伸到窗口的右侧，并且不受1140px容器的约束。




我正在使用Bootstrap的网格系统。但是，即使突破了这一点并使用绝对定位，我也不知道如何仅使用CSS（而不使用JS）来做到这一点。

有人可以帮忙吗？

最佳答案

我认为这种布局可能与您要寻找的布局很接近。它使用calc根据容器宽度动态调整元素的大小：

整页JSFiddle：https://jsfiddle.net/2ggyyjp1/1/embedded/result/

现场演示（一定要单击“整页”！）：

.left {
    position: relative;
    height: 300px;
    background-color: black;
    width: calc(50% - 1140px * 0.25);
    float: left;
}

.left-content {
    width: 285px;
    color: white;
    position: absolute;
    top: 0;
    right: 0;
}

.right {
    height: 300px;
    background-color: blue;
    width: calc(50% + 1140px * 0.25);
    float: left;
    color: white;
}

<div class="left">
    <div class="left-content">
        Text Contents Text Contents Text Contents Text Contents Text Contents Text Contents Text Contents Text Contents Text Contents
    </div>
</div>
<div class="right">
    Text Contents Text Contents Text Contents Text Contents Text Contents Text Contents Text Contents Text Contents Text Contents
</div>