HTML“表格"与滚动的中间单元格? [英] HTML "Table" with scrolling middle cell?

问题描述

我已经研究了Stack Overflow中的许多示例，但是我似乎并不太正确，这开始让我希望我选择了不同的职业！

I've gone through dozens of examples in Stack Overflow but I just can't quite seem to get this right and it's starting to make me wish I'd chosen a different career!

我需要一个固定的高度和固定的宽度表，该表具有三行.

I need a fixed height and fixed width table with three rows.

第1行的高度可变，并且应根据内容进行缩放，没有垂直滚动条.

Row 1 will be variable height and should grow and shrink according to the content, with no vertical scroll bar.

第3行的高度应固定在表格底部.

Row 3 should be fixed height at the bottom of the table.

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

Row 2 should take up all the remaining space but should contain a vertical scroll bar if the content is too big.

基本上，这是向用户显示电子邮件.第1行将包含所有标题以及任何可选的标题，附件等(这就是为什么它需要可变高度的原因).

Basically, this is to display an email message to the user. Row 1 will contain all the headers and any optional headers, attachments, etc. (which is why it needs to be variable height).

第2行是消息的正文，带有滚动条.

Row 2 is the body of the message, with a scroll bar.

第3行用于操作按钮，删除"，前进"等.

Row 3 is for action buttons, Delete, Forward, etc.

整个东西的高度和宽度必须固定，因为我需要将其嵌入到JQuery对话框DIV中.

The whole thing needs to be fixed height and width because I need to embed it in to a JQuery dialog DIV.

在我的问题标题中，我已将表格用引号引起来，因为我很高兴拥有仅CSS的解决方案，前提是该解决方案能够按所述方式工作.对我来说，主要目标是通过跨浏览器的方法实现上述功能.

In my question title I've put table in quotes because I'm happy to have a CSS-only solution, provided it works as described. The key goal for me is that we achieve the functionality above in a cross-browser approach.

希望您能提供帮助！

推荐答案

首先，这里是一个演示:小链接.

First, here's a demo: little link.

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

What I did was to not include the text directly in the middle cell, but give it position: relative;, then create a div inside it with the following:

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

正如您在上面的演示中所看到的那样，它可以完成这项工作.

Which, as you can see in the demo above, does the job.

希望有帮助！

这篇关于HTML“表格"与滚动的中间单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！