从固定点拉伸到窗口边

Question

我遇到了这个设计的问题。首先，它看起来很简单：左栏宽25％，右栏宽75％。但是，这只是在中心＆＃34;容器＆＃34;这是1140px宽。在更大的屏幕上，它变得更加困难。

• 左栏需要拉伸到窗口的最左侧。
• 左列的内容（但不是它的背景颜色）始终保持在该1140px容器内。
• 右栏需要伸展到窗户的最右侧。
• 右栏的内容延伸到窗口的右侧，并且不受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>