背景填充超过一半页面的等高列

Question

对于任何感兴趣的人，最终代码：http://jsfiddle.net/asaxdq6p/6/

---

我试图达到这样的效果： http://maciej.kuzniczysko.pl/images/stackoverflow-1.jpeg

我正在使用 Equal Height Columns with Cross-Browser CSS 技巧让两列高度相同。

问题是我不会使用 JS（侧边栏宽度）或 CSS3（计算）。它将成为主要面向老年人的网站，即使人们使用旧浏览器/不使用 JS（因为它通常在波兰为老年人服务），它也必须按预期工作。
它的结构也必须正确（我的意思是文本浏览器会像现在一样在逻辑上显示它）。
问题是，有可能吗？

最大页面宽度为 1400 像素，并以自动边距居中。
第一列是侧边栏，即页面宽度的 28.5%（当页面达到 1400 像素时给出 400 像素），它没有固定宽度（通常是 300-400 像素，因为我正在构建响应式网站）。
第二列是内容区域，即 71.5%（其余部分，最大为 1000px）。

我想要什么？
在屏幕上的侧边栏之后开始背景 - 所以它总是超过正文的 50% + 页面中心和结束侧边栏位置之间的差异。

由于等高列，它必须准确地从预期位置开始（否则它会覆盖侧边栏的背景）。
然后它可能会溢出，我不在乎。

Problem 是页面中心和结束侧边栏位置之间的差异不固定，所以我设置为 300px (1400px/2 = 700px; 700px - 400px = 300px)，当它坏了页面宽度小于 1400 像素。

好的，话太多了。
有 JSFiddle 我正在谈论的内容以及到目前为止我所做的事情（当然是评论）。

或者，我可以设置一些 height: 100% 和 position: relative，通过将主体的背景颜色设置为侧边栏，使侧边栏覆盖一点背景。
但我不确定这是唯一的方法。

提前感谢您的每一个建议或建议！

Answer 1

this 是你想要达到的目标吗？

HTML

<div class="wrapper">
  <div class="sidebar"></div>
  <div class="main">
    <div class="content"></div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
}
.sidebar {
    height: 100%;
    width: 28.5%;
    background-color: gray;
    float: left;
}
.main {
    float: left;
    width: 71.5%;
    height: 100%;
    background: url("http://www.etapetki.com.pl/wp-content/uploads/2014/01/kosmos.jpg") 0 50%/cover no-repeat fixed #787878;
    padding: 5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    width: 100%;
    height: 100%;
    background-color: gray;
}

您也可以从.content 中删除height: 100%