滚动中间单元格的HTML“表格”?

时间:2012-11-26 13:55:42

标签: html css html-table

我已经浏览了Stack Overflow中的几十个例子,但我似乎无法做到这一点,并且它开始让我希望我选择了不同的职业!

我需要一个固定高度和固定宽度的表,有三行。

第1行将是可变高度,应根据内容增长和缩小,没有垂直滚动条。

第3行应该是表格底部的固定高度。

第2行应占用所有剩余空间,但如果内容太大,则应包含垂直滚动条。

基本上,这是向用户显示电子邮件消息。第1行将包含所有标题和任何可选标题,附件等(这就是为什么它需要是可变高度)。

第2行是邮件的正文,带有滚动条。

第3行用于操作按钮,删除,转发等

整个事情需要固定高度和宽度,因为我需要将它嵌入到JQuery对话框DIV中。

在我的问题标题中,我把表放在引号中,因为我很高兴有一个只有CSS的解决方案,只要它按照描述的方式工作。我的主要目标是以跨浏览器的方式实现上述功能。

希望你能帮忙!

1 个答案:

答案 0 :(得分:5)

首先,这是一个演示:little link

我所做的是不直接在中间单元格中包含文本,但是给它position: relative;,然后使用以下内容在其中创建div

position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: auto;

正如您在上面的演示中所看到的,完成这项工作。

希望有所帮助!