Question

我正在尝试在我的网页中创建以下2列布局：

+-------+---+
|       |   |
|       |   |
|   A   | B |
|       |   |
|       |   |
|       |   |
|       +---+
|       |   |
|       | C |
|       |   |
+-------+---+

具有以下特点：

左列和右列都有固定的宽度。
C的内容是固定的，因此C具有固定的高度。
A和B中的内容量可能会有所不同（最终用户提供此内容），因此A和B所需的最小高度可能会有所不同。
如果A需要比B和C组合更多的高度，那么应该拉伸B的高度以使其保持接触C，并且C的底部与A的底部对齐。
如果A要求的高度低于B和C的总和，则应拉伸A，使A和C的底部对齐。
A和B有明显的边框和/或背景颜色，所以我不能通过不拉伸其中一个而作弊（而且C不需要拉伸）。

我尝试通过使用div表示每个单元格并使用jQuery的文档就绪事件来将单元格调整到适当的高度，具体取决于哪个列是最高的。大多数时候，这是有效的。但是，由于A包含嵌入的YouTube视频，而C包含嵌入式Google地图部分，因此会进行大量动态内容调整，这有时会导致我的javascript代码使用错误的高度值并弄乱布局过程。
此外，当您看到内容单元被拉伸到正确的高度时，它看起来相当丑陋，即使我可以忍受它，如果它一直工作。

作为替代方案，我尝试使用表格进行此布局，因为它们内置了“保持所有列同样高”的行为。
这种方法的问题在于我必须对A使用“td rowspan = 2”，一旦我这样做，IE和Chrome会忽略我在C上指定的任何固定高度，而是使C方式太高。

所以基本上我完全坚持如何实现这个（看似简单的）布局。有人能指出我正确的方向吗？

我的目标是Chrome，FireFox和IE7 +，但在IE7和IE8中，可以接受所需布局的合理近似值。

Answer 1

尝试将此混合div作为表格。我在Mac上，但我无法在IE上测试它，但我认为它可以在IE上运行

HTML：

<div id="table">
    <div id="table-cell-left">
        <div id="aid" class="row">A ID</div>
    </div>
    <div id="table-cell-right">
        <div id="bid" class="row">B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br /></div>
        <div id="cid" class="row">C ID</div>
    </div>
</div>

CSS：

#table{display:table;}

#table-cell-right,
#table-cell-left{display:table-cell;}

#table-cell-left{background:blue;}

#aid,#bid,#cid{width:150px}

#aid{height:100%;border:1px solid #ccc;}
#bid{height:auto;border:1px solid #000;background:red;}
#cid{height:20px;float:right;background:yellow}

在此处查看演示：http://jsfiddle.net/WpuPq/5/

Answer 2

好的，我正在工作，所以我现在能做的最好，但它在IE7上运行得非常好。

事先有些话。对于这个解决方案，我使用了表格。现在使用表格没有任何问题 - 当你将它用于表格数据时或者在极少数情况下使用它时。在这种情况下，必须使用它来使用基本css来解决这个问题。唯一的另一种方法是使用可能疏远某些用户的技术（高级CSS） - 最终，您需要决定是否使用可能不适用于每个人浏览器的内容。如果您使用CSS3 +，我肯定无法正确查看您的网站，因为我现在卡在IE7上。

我在IE7上测试了这个并且像魅力一样。如你所见，它也不是很重的代码。

HTML

<div id="cols">
<table>
    <tbody>
        <tr>
            <td class="left"">A Box</td>
            <td class="right">
                <div>B Box</div>
                <div>C Box</div>
            </td>
        </tr>
    </tbody>
</table>
</div>

CSS：

#cols table td {
    width: 250px;
}
#cols table td.left {
    background: #f1f1f1;
}
#cols table td.right {
    padding: 0 0 250px 0;
    background: #ccc;
    position: relative;
}
#cols table td.right div + div {
    position: absolute;
    bottom: 0;
    width: 250px;
    height: 250px;
    background: #000;
    color: #fff;
}

结果：

result of test in both cases

如您所见，此代码适用于2种情况：左列较大;或者，右栏更大。

布局有2个可变高度的列

2 个答案: