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

Question

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

---

我想达到这样的效果: <强> http://maciej.kuzniczysko.pl/images/stackoverflow-1.jpeg

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

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

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

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

由于 Equal Height Columns，它必须准确地从预期位置开始(否则它会覆盖侧边栏的背景)。
然后它可能会溢出，我不在乎。

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

好了，废话太多了。
有 JSFiddle 我在说什么以及我已经做了什么(当然有评论)。

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

提前感谢您的每一个意见或建议!

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%