html高度溢出,html – 高度为100％且溢出的元素

干得好：

问题是身高：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实际上尊重它的父母.如果只有真正的孩子那么容易.