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

Question

很抱歉工作很尴尬。

内容区域假设是 1000px，我希望左列为 25%，右列为 75%，但由于窗口比 1000px 宽，我希望列保持相同的比例，但将它们的背景颜色渗出到相应的侧面。这里有几张图片可以帮助说明这一点：

https://i.stack.imgur.com/hvWrp.jpg

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

https://i.stack.imgur.com/hvWrp.jpg#1

在这里，内容区域与上面相同，但左列占左列的 25%，右列的 75%，但有后向颜色延伸到边缘，同时保持该内部比例。

我知道有一种方法可以通过 js 做到这一点，如果有办法只用 css/html 来做到这一点，那就徘徊一下

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

感谢您的任何帮助！

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

Answer 1

可能有几种方法可以完成您的要求。这是一支 codepen.io 笔，显示了一种方式：http://codepen.io/anon/pen/zxYgRp

我在这里复制了代码：

.HTML

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

.CSS

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;
}

基本上，我们正在创建一个具有最大宽度的包装器，然后添加一个背景渐变，从导航颜色到中间的右主列颜色。我使用了这个CSS渐变生成器：http://www.colorzilla.com/gradient-editor/

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

Answer 2

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

这是代码笔：http://codepen.io/anon/pen/PwoMxw

.HTML

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

.CSS

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;
}

自由地使用位置：绝对在这里，比例必须细化，但这是实现目标的一种方式。