如何获得三列，兄弟 div，每个扩展以填充其父级？

Question

我一直在寻找。对不起，我现在很绝望，所以我想我会在这里问。下面是一个 HTML 示例。当 B 列长于单个页面（视口，抱歉，我不确定此处的术语是否正确）时，A 和 C 不会在高度上扩展以填充容器 div。它们填满整个页面，但即使 B 列比单页长，它们也会在单页长度处停止。任何想法，我一直在拔头发。我一直在玩 height 和 min-height ，但似乎没有任何效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
        <style type="text/css">
            html, body 
            {
                height: 100%;
                background-color: gray;
                padding: 0;
                margin: 0;
            }

            #container
            {
                height: 100%;
                margin: auto;
                padding: 0px;
                width: 610px;
            }

            #a
            {
                width: 5px;
                min-height: 100%;
                float: left;
                background-color: yellow;
            }

            #b
            {
                width: 600px;
                background-color: Blue;
                float:left;
                min-height: 100%;
            }

            #c
            {
                width: 5px;
                float:left;
                min-height: 100%;
                background-color: green;
            }
        </style>
</head>
<body>
        <div id="container">
            <div id="a"></div>
            <div id="b">
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
                <p>more</p>
            </div>
            <div id="c"></div>
    </div>
</body>
</html>

编辑： 在我浪费时间向我解释关于水平抓取一个像素然后平铺之前，设计师给了我一个垂直渐变。顶部开始变暗，结束变浅。那以及阴影效果。阴影水平运行。因此，据我所知，没有办法对其进行切片，然后巧妙地使用平铺。

Answer 1

到目前为止，最简单的方法是使用单行表而不是 div。表格可能不是超酷的做事方式，但归根结底，它们只需要比尝试使用 css 实现相同目标的代码少得多。

Answer 2

你见过faux columns的把戏吗？