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

Question

我有这个布局：

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

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

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

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

Answer 1

您可以使用一种称为“仿列”的技术。一个很好的例子是这个页面上的方法 3 ，或者正如 Wex 在下面的评论中添加的那样，这个链接在 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 剥离位。