我正在尝试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;
}
