Question

我一直在寻找。对不起，我非常绝望，所以我想我会在这里问。下面是一个HTML示例。当列B长于单个页面（视口，抱歉我不确定这里的正确术语）时，A和C的高度不会扩大以填充容器div。它们填充整个页面，但即使列B长于单个页面，也会停在单页长度。任何想法，我一直在拉我的头发。我一直在玩高度和最小高度，似乎没什么用。

<!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诀窍吗？

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

2 个答案: