Html 内容区域比例与窗口相同的两列布局比内容区域大

对不起，工作不方便

内容区域假设为1000px，我希望左边的列为25%，右边的列为75%，但由于窗口比1000px更宽，我希望列保持相同的比例，但它们的背景颜色会从相应的侧面溢出。以下是一些图片，试图帮助说明这一点：

这里的图像是25%的左栏和75%的右栏

在这里，内容区域与上面相同，但左列是左列的25%，右列的75%，但有背景色，延伸到边缘，同时保持内部比例

---

我知道有一种方法可以通过js实现，只是想知道是否有一种方法可以通过css/html实现

此外，黑色区域将具有覆盖所有黑色区域的图像

谢谢你的帮助

---

编辑：最终使用了calc，因为它已经被支持了一段时间了

可能有几种方法可以满足您的要求。这是一支codepen.io笔，显示了一种方式：

我在这里复制了代码：

HTML

基本上，我们正在创建一个具有最大宽度的包装器，然后在中间添加一个从Nav颜色到主右柱颜色的背景梯度。我使用了这个CSS渐变生成器：

---

我在导航周围添加了边框作为左侧边栏和主要内容区域，以便您可以看到它们的结束位置和背景色的开始位置

我添加了另一个答案，以展示如何根据OP的澄清以不同的方式进行操作。你会注意到我使用了背景图像

这是密码笔：

HTML

---

位置的使用是自由的：这里是绝对的，比例需要改进，但这是实现目标的一种方法。

谢谢，这确实有效，但我想我正在寻找一种真正的方法来将颜色带到边缘，因为会有一个背景图像扩展黑色/灰色区域的宽度。我知道有一种方法可以通过js实现这一点，只是想知道是否有一种方法可以通过css/htmlya实现，这是我所能做到的，但它不是居中的。

<div id="wrapper">
   <nav></nav>
   <div id="main"></div>
</div>

body {
  margin: 0;
  padding: 0;
  background: #ff0000; /* Old browsers */
  background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 50%, #cccccc 51%, #cccccc 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(50%,#ff0000), color-stop(51%,#cccccc), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 50%,#cccccc 51%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #ff0000 0%,#ff0000 50%,#cccccc 51%,#cccccc 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 50%,#cccccc 51%,#cccccc 100%); /* IE10+ */
  background: linear-gradient(to right, #ff0000 0%,#ff0000 50%,#cccccc 51%,#cccccc 100%); /* W3C */

}

#wrapper { 
  max-width: 40em;
  margin: auto;
  position: relative;
}

nav { 
  background: #f00;
  width: 25%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid black;
}

#main { 
  background: #ccc; 
  min-height: 500px;
  border: 1px solid black;
}

<div id="sidebar">
  <nav></nav>
</div>
<div id="main">
  <div id="main-inner"></div>
</div>

body { margin: 0; padding: 0;}

#sidebar {
    width: 25%;
   background-image: url(http://i.imgur.com/xDe7IaC.jpg);
    position: fixed;
    min-height: 100%;
}

nav {
   max-width: 100%;
   width: 16em;
  position: absolute;
  top: 0;
  right: 0;
  min-height: 100%;
  border: 1px solid blue;
}

#main {
  width: 75%;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: url(http://i.imgur.com/OYjJ4yS.jpg);
}

#main-inner {
  width: 48em;
  max-width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border: 1px solid red;
}