Html 有没有办法在没有表格的情况下将居中的div背景色“出血”到视口边缘？

这适用于以标准为中心的响应.content div，该div具有各种断点以设置其宽度

设计要求是右侧的一部分。内容有一个带彩色背景的div（本例中为黑色），背景颜色一直流到视口的右边缘。同样，它也可以用于左侧

我想到的是表格，但我想知道是否有一个非表格的版本我无法理解

<div id="contain">
    <div id="left"><!-- nothing can go here to spacing breaks --></div>
    <div id="content">
        <div id="rightfloat">status</div>
        <div id="somecontent">content<br>blue borders for dev only</div>
    </div>
    <div id="right"><!-- nothing can go here to spacing breaks --></div>
</div>

#contain {
    width: 100%;
    padding: 0;
    margin: 0;
    display: table;
}

#left, #right {
    text-decoration: none;
    display: table-cell;
    width: auto;
    text-align: center;
    padding: 0;
}

#left {
    background: white;
}

#right {
    background: black;
    color: white;
}

#content {
    display: table-cell;
    width: 360px;
    background: #F00;
    height: 4em;
    border-right: 1px solid blue;
    border-left: 1px solid blue;
}

#rightfloat {
    float: right;
    width: 20%;
    background: black;
    color: white;
    height: 100%;
}

我创建了一个js小提琴：

---

谢谢

你有你的预期产出的图表吗？你是说像？这很有帮助，我想这就是你现在拥有的。基于此，你想做什么？@jtorrescr我觉得JSFIDLE就足够了。@Paulie_D这似乎行得通，谢谢。我从来没有想过使用：后与一些巨大的宽度计算，将迫使页面宽度真的巨大。