tbody css 高度,html – CSS：无法为％滚动设置tbody height

我正在尝试CSS解决方案来滚动表内容,同时保持标题固定.

CSS代码1：

* {

padding:0;

margin:0;

border:0;

}

#ListData {

display:block;

width:100%;

height:100%;

float:left;

background:#ffffff;

}

#ListData table {

width:100%;

}

#ListData thead {

position:relative;

width:100%;

height:20px;

overflow:auto;

background:#0099cc;

}

#ListData tbody {

position:relative;

width:100%;

height:300px;

overflow:auto;

}

这在Firefox中运行良好(我现在不关心IE …)

但是,如果我使用百分比而不是px或em：

* {

padding:0;

margin:0;

border:0;

}

#ListData {

display:block;

width:100%;

height:100%;

float:left;

background:#ffffff;

}

#ListData table {

width:100%;

}

#ListData thead {

position:relative;

width:100%;

height:10%;

overflow:auto;

background:#0099cc;

}

#ListData tbody {

position:relative;

width:100%;

height:50%;

overflow:auto;

}

我究竟做错了什么？ 🙂

最佳答案 在某些时候,您的对象需要具有具有确定大小的块级父元素,以便获得所需的滚动.

特别是在您的情况下,包含DIV ListData或ListData表需要具有特定高度.

添加高度和宽度的百分比值时,请确保您知道“x％of what …？”的答案.并在链条上跟随这个问题,直到你遇到硬边界的东西.如果你将它设置为Body元素并且仍然没有硬边界,则无法获得所需的效果.

我在Firefox 3.5.xx中测试了这两个并获得了滚动的tbody：#ListData

{

display:block;

width:100%;

height:200px;

float:left;

background:#ffffff;

}

要么#ListData table {

width:100%;

height: 200px;

}

这也有效：body

{

width: 100%;

height:600px;

}