干得好:
问题是身高:100%;将填充下一个定义的容器.无论出于何种原因,表都不被视为用于该目的的有效容器.所以我们需要做的是利用表格布局的一些奇怪之处.
position: absolute;
top:5px; left:5px;
right: 5px;
bottom: 40px;
overflow: auto;
border: 1px solid green;
background-color: #eee;
不需要在td上进行相对定位.不要问我为什么,也许有些人比我能说的更有知识.
无论如何,我们可以强制它扩展以填充一定量的空间,同时仍允许:
>页脚可见.
>存在填充(即使它不是技术填充.)
>此解决方案适用于跨浏览器环境.
真的希望这会有所帮助;如果没有,我会非常乐意再拍一次.
更新
你说javascript不是你想做的,但是这里是一个使用jQuery的简短解决方案,它实际上可以解决问题:
$('td > div').each(function() {
var t = $(this);
var text = t.html();
t.hide();
t.height(t.parent().height());
t.show(text);
});
为什么这样有效:
div需要其父级在100%高度工作之前具有已定义的高度,但是这不是您的选项,因为您已经声明这是所有动态内容.没问题.我们只需要jQuery在浏览器渲染后将计算出的高度推送到div.很简单吧?
好吧,不是那么快. Divs并不意味着受到表格单元的限制,至少在理想情况下并不理想.我们已经有一些东西在td中作为一个逻辑的,独立的容器,如果它已经有很多内容溢出其边界,那么div并不关心td的高度是多少.当我们去查询该td的高度时,无论它实际是什么,它都会报告它比它包含的元素大.所以,如果你在评论出我们清空div的行之后你会看到小提琴,你会发现td错误地报告自己几乎是900像素高.
那么我们该怎么办?
好吧,我们把这些内容从div中拿走了.现在它只是一个外壳,在任何情况下它都会比它的容器小.这意味着当我们查询它时,td不会因为误报它的大小而撒谎,因为它自信地包含它的孩子.
一旦我们从TD得到了真相,我们告诉div它的父级报告的大小是它需要的大小,并将其回馈给它.
瞧.你现在有一个div实际上尊重它的父母.如果只有真正的孩子那么容易.