两个窗格网站 - 拉伸垂直高度？

Question

我有这个布局：

顶栏是固定的。然后我想在左窗格中有一个侧边栏，并在右窗格中显示主要内容。窗格是不同的颜色，并由边框分隔。

问题是有时左窗格会更高，有时右窗格会更高。因此，一个窗格比另一个窗格短（颜色结束，你看到白色）。

我尝试height:100%;，但只有在内容短于浏览器高度时才有效。

我怎样才能用CSS解决这个问题？

Answer 1

您可以使用一种名为“虚假列”的技术。一个很好的例子是this page上的方法3，或下面评论中添加的Wex this link on A List Apart。

Answer 2

你可以尝试这样的事情。唯一的问题是你需要知道一个固定的高度，如果有一列可能比另一列大，并且无法知道哪个更大，你可能需要做一些jquery来解决它。

http://jsfiddle.net/rhoenig/x7NAY/

Answer 3

我对此问题的解决方案通常是嵌套列，以便一列控制另一列，然后为另一列提供一个背景图像，看起来好像是第一个继续：

    <style>
    *{margin:0;padding:0;}
    .main_con{position:relative;margin:0 auto;width:960px;}
    .head_con{position:fixed;top:0;width:960px;height:42px;background:#ff0;}
    .col_con{padding:42px 0 0 0;}
    .left_col{width:360px;margin: 0 15px 0 0;float:left;background: #f60;}
    .right_col{position:relative;float:left;width:960px;background: #f00 url("image that looks like left column continued") repeat-y;}
    .right_col_content{float:left;width:585px;}
    .clr{clear:both;}
    </style>

表示html：

    <div class="main_con">
        <div class="col_con">
            <div class="right_col">
                <div class="left_col">
                        <p>left column content pushes right column down</p>    
                </div>
                    <div class="right_col_content">
                        <p>right column content</p>
                    </div>
            <br class="clr" />
            </div>
        </div>
        <div class="head_con">
            <p>head content</p>
        </div>
    </div>

注意：* {}剥离仅用于示例目的，应替换为css的正确默认剥离位。