有两列全高背景？答案

【问题标题】：Have two columns with full height background?有两列全高背景？
【发布时间】：2013-03-05 07:00:39
【问题描述】：

我想制作一个具有两列固定宽度的页面，每列都有自己的背景颜色，在页面的整个高度上延伸，即使在向下滚动以查看大内容时也是如此。一个简单的图澄清：https://dl.dropbox.com/u/3060536/twocol.png

我找到了几个几乎可以满足我的需求的解决方案。

将height:100% 放在任何地方，只要不滚动就看起来很棒：这似乎与屏幕的高度有关（向下滚动较长的文本时背景会消失）。
将height:100% 放在html 和body 上，将min-height:100% 放在其中一个div 上，我可以让一列填满整个高度。但这需要直接在 body 下方完成，因此它似乎无法与我想要的居中两列布局相结合。
将padding-bottom:100000px 和margin-bottom:-100000px 放在列中，将overflow-y:hidden 放在父级中，如果所有内容都适合屏幕，则可以正常工作，但如果文本不适合屏幕，则完全删除向下滚动的选项.

所以以上都不是我想要的。这样做的正确方法是什么？

【问题讨论】：

你也许可以使用类似alistapart.com/article/fauxcolumns 的东西（而不是给你的元素一个背景图像/颜色）
Flexbox 可以在现代浏览器上为您工作
@NickSlash 可以，但我仍然希望找到一个解决方案，而不是不必要地使用图像文件来获取纯色。
@CoryDanielson 如果只有 IE 死了... ;)

标签： html css height

【解决方案1】：

你可能会在这里得到一些想法。如果 position:relative 不打扰你，试试这个。

<html>
<head>
<title>sample</title>
</head>

<body style="height:100%;">

<center>
    <div style="position:relative; width:900px; height:100%;">

        <div style="position:relative; float:left; background-color:blue; width:200px; height:auto; min-height:100%;">
            '//some texts or controls
        </div>


        <div style="position:relative; float:left; background-color:green; width:700px; height:auto; min-height:100%;">
            '//some texts or controls
        </div>

    </div>
</center>   

</body>
</html>

【讨论】：

这似乎根本不起作用，它在这里给出了不等高的列。你能重新检查你写的东西吗？我不明白为什么它应该起作用，而且确实在测试时发现它不起作用。

【解决方案2】：

看看blog post。我花了一段时间才理解它是如何工作的，但确实如此，而且很棒。

【讨论】：

能否请您描述解决方案或在您的答案中提供示例而不是链接到博客文章？我认为这会更有帮助，并且更具体到 OP 的问题。也不能保证下次有人想要检查该问题的答案时该博客文章会存在。

【解决方案3】：

我没有对此进行测试，我很确定left: 50%; margin-left: -450px 不能很好地使元素居中。但是自从我完成 html 以来已经有一段时间了。

#background: {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 900px;
    left: 50%;
    margin-left: -450px;
    background-color: red;
}
#background div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: blue;
}

还有 HTML

<div id="content"></div>
<div id="background"><div></div></div>

更新

正如我所说，它未经测试。原来我忘了包括height 或bottom for #background，可能还有别的东西。

这是一个有效的想法的例子http://jsfiddle.net/bEuTU/

【讨论】：

绝对定位只应在绝对必要时进行。
我不确定absolute 的定位有什么问题，但这只是在不与之交互的内容后面有一个层的示例。我很确定 CSS 的其余部分也不漂亮。
这样做是使蓝色固定的 200px 侧边栏左对齐。红色部分甚至不可见。恐怕这种方法真的行不通。