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

Question

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

我正在尝试实现这样的效果： http://maciej.kuzniczysko.pl/images/Whosebug-1.jpeg

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

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

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

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

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

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

好吧，废话太多了。
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%

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

Equal Height Columns with background filling more than half of page

html

css

background

fluid-layout