从固定点拉伸到窗边

Question

我对此设计有疑问。起初，它看起来很简单：左列是 25% 宽，右列是 75% 宽。但是，这仅在 1140 像素宽的中心“容器”内。在更大的屏幕上，它变得更加困难。

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

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

谁能帮忙？

Answer 1

我认为这种布局可能与您所寻找的很接近。它利用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>