html - 两列布局，内容区域比例相同，因为窗口大于内容区域

Question

抱歉，工作很尴尬。

内容区域可以说是 1000px，我希望左列为 25%，右列为 75%，但由于窗口比 1000px 宽，我希望列保持相同的比例，但有它们的backgrnd-color 渗出到相应的边。这里有几张图片试图帮助说明这一点:

http://imgur.com/eQj9QSv,NAxtgTn

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

http://imgur.com/eQj9QSv,NAxtgTn#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/

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