我整个下午都在研究这个，如果没有 JS，这似乎是不可能的。我还研究过@Grily 的解决方案，我想我至少在 Chrome 中做到了。
解决方案 1 适用于 Firefox、Chrome 和 IE
不过我还是让它起作用了。这并不完全符合规范。
HTML
<div id="DIV-1">Header </div>
.. in the Fiddle there's a lot of "Lorum ipsum here"
<div id="DIV-3">Footer </div>
CSS
@media only screen
and (orientation : landscape) {
body {
position: absolute;
display: block;
box-sizing: border-box;
white-space: normal;
-webkit-columns: 235px auto;
-moz-columns: 235px auto;
columns: 235px auto;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
height: 100%;
float: left;
width: calc(100% + 450px);
min-width: -webkit-min-content;
padding-left: 400px;
}
#DIV-1{
position: absolute;
left: 0px;
box-sizing: border-box;
background-color: #2693FF;
height: 100%;
width: 400px;
float: left;
}
#DIV-3 {
position: relative;
float: right;
left: 205px;
box-sizing: border-box;
background-color: #FF7373;
height: 100%;
width: 450px;
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
}
我已将列的内容容器直接放入正文中。 (仍然可以是一个 div)。
width: calc(100% + 450px);
min-width: -webkit-min-content;
这个位实际上(通过魔法)强制浏览器识别 body 的宽度比视口(viewport)宽。标题的定位很简单。 absolute 并将 padding 添加到 body 中，它就位了。内容现在很好地向右流动。 页脚 除外。我通过使用 column-span: all 将它放在正确的位置。 Firefox 对此采取了自己的方式，并且实际上正确地呈现了它。 Chrome 和 IE 呈现列 inline 并且仅呈现列的宽度。这是这种方法的缺点。
我希望你能用它做点什么，或者其他人可以改进它，这样它实际上会在页面末尾附加页脚，而不会将其缩小到列的宽度。
fiddle :http://jsfiddle.net/5dtq47m3/
解决方案 2 - 适用于 Chrome
编辑了 Grily 的作品。
HTML
<header>
<h1>Article Title (width 400)</h1>
</header>
<article>
........
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>
CSS
* {
padding: 0;
margin: 0;
}
body {
display: flex;
position: absolute;
height: 100%;
}
header {
background: green;
width: 400px;
flex: none;
float: left;
}
article {
background: #CCC;
-webkit-columns: 235px auto;
columns: 235px auto;
-webkit-column-gap: 0;
column-gap: 0;
color: rgba(0, 0, 0, .75);
flex:none; /*added*/
width: calc(100% + 10px); /*added*/
max-width: -webkit-max-content; /*added*/
}
article p {
padding: .2em 15px;
text-indent: 1em;
hyphens: auto;
}
footer {
background: yellow;
width: 450px;
flex: none;
float: right; /*added*/
}
http://jsfiddle.net/w4wzf9n6/8/
