从固定点伸展到 Window 边

Question

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

左栏需要延伸到 window 的最左侧。
左栏的内容（但不是它的背景颜色）始终位于 1140 像素的容器内。
右列需要延伸到 window 的最右侧。
右栏的内容延伸到 window 的右侧，不受 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>

从固定点伸展到 Window 边

Stretching to Window sides from fixed point

css

css-position

twitter-bootstrap