Question

我想创建一个包含两列固定宽度的页面，每列都有自己的背景颜色，在页面的整个高度上展开，即使向下滚动查看大内容也是如此。一个简单的说明：https://dl.dropbox.com/u/3060536/twocol.png

我找到了几个几乎做我想要的解决方案。

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

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

Answer 1

你可能会在这里得到一些想法..如果位置：亲戚不打扰你，试试这个。

<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>

Answer 2

我没有测试过这个，我非常确定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或#background，也可能包含其他内容。

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

Answer 3

看看blog post。我花了一段时间来了解它是如何工作的，但它确实很好。

有两列全高背景？

3 个答案: