Question

抱歉尴尬的工作。

内容区域可以说是1000px，我希望左列是25％而右边是75％，但是当窗口宽度超过1000px时，我希望列保持相同的比例，但是背景颜色渗出到相应的侧面。以下是一些尝试帮助说明这一点的图片：

http://imgur.com/eQj9QSv,NAxtgTn

此处图像左列为25％，右列为75％

http://imgur.com/eQj9QSv,NAxtgTn#1

此处，内容区域与上面相同，但左列为左列的25 %%，右列为75％，但有后端颜色，在保持内部比例的同时延伸到边缘。 / p>

我知道有一种方法可以通过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;
}

在这里有自由使用的位置：绝对，比例必须加以改进，但这是实现目标的一种方法。

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

2 个答案:

HTML

CSS

HTML

CSS