编辑：概念证明

Question

alt text http://1updesign.org/uploads/kambe.png

Answer 1

我通常创建一个包含div（模拟表格行），然后为特定列div（模拟表格数据）。

<div class="container">
    <div class="left-column column"></div>
    <div class="right-column column"></div>
</div>

然后使容器相对定位：

.container { position: relative }

这允许容器内绝对定位的元素。然后我们可以使用绝对定位的一些好处来拉伸列div：

.column { position: absolute; top: 0; bottom: 0; }

然后，您需要将左列放在右侧的左侧和右侧列中：

.left-column { left: 0; }
.right-column { right: 0; }

其余的（样式）取决于你，我认为应该这样做。

编辑：概念证明

我写了这个概念证明代码如下：

<html>
    <head>

        <style type="text/css">
            .container { height: 200px; width: 200px; position: relative; border: 5px solid red; }
            .left-column { width: 100px; background-color: blue; left: 0; }
            .right-column { width: 100px; background-color: yellow; right: 0; }
            .column { position: absolute; top: 0; bottom: 0; }
        </style>

    </head>
    <body>
        <div class="container">
            <div class="left-column column"></div>
            <div class="right-column column"></div>
        </div>
    </body>
</html>

呈现为：

alt text

我希望有所帮助。

Answer 2

这里有一个很好的例子，展示了如何以css方式完成全高和等高的列。

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

如何用div而不是纯css中的表来实现这种100％高度效果？

2 个答案:

编辑：概念证明