html - CSS:无法以 % 为单位设置滚动的 tbody 高度

Question

我正在尝试使用 CSS 解决方案滚动表格内容，同时保持标题固定。

CSS 代码 1:

<style type='text/css'>
    *   {
    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;
                }               
    </style>

这种风格的输出在这里:
http://riotdesign.in/test.php

这在 Firefox 中运行良好(我目前不关心 IE..)

但是，如果我使用百分比而不是 px 或 em:

<style type='text/css'>
    *   {
    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;
                }               
    </style>

这就是我得到的:
http://riotdesign.in/test2.php

我究竟做错了什么？ :)

Answer 1

在某些时候，您的对象需要有一个 block具有确定大小的级别父元素，以获得您想要的滚动。

特别是在您的情况下，包含 DIV ListData或 ListData table需要有特定的高度。

在添加高度和宽度的百分比值时，请确保您知道“什么的 x%？”的答案。并沿着这个问题的链向上追问，直到你遇到一些有硬边界的问题。如果您到达 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;
}