Question

我需要创建一个聊天布局，它使用所有可用空间并且可以很好地缩放，但是固定的大小很少。

这是结构：

<table style="width: 100%; height: 100%">
    <tr>
        <td></td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

但是，我想在第一个表单元格中放置大量内容，我希望它能够滚动，所以它不会扩展表格。

是否有可能使其正常溢出，而没有固定的单元高度？简单地添加overflow：auto似乎不起作用。

PS。我讨厌表，但无法找到一个非常干净和跨浏览器的方式来做这样的布局与divs和CSS。如果有人可以拿出一个，我很乐意使用它。

Answer 1

实现的一种方法是使用将所有内容放在div元素中并将div overflow属性设置为auto

<table style="width: 100%; height: 100%">
    <tr>
        <td>
         <div style="overflow:auto;">
              //your contain 
          </div>
        </td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

Answer 2

如果您的内容实际上甚至不在表格中，则使用CSS网格系统，例如960.gs或Nicole Sullivan的“OO-CSS”。

你想要将一个容器分成你需要的许多网格，这些更适合CSS装饰。它们更灵活，更易于使用。

表格单元格溢出

2 个答案: