html – CSS：无法为％滚动设置tbody height

2023年1月16日 220次阅读

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

我究竟做错了什么？ 🙂

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

特别是在您的情况下,包含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;
}
点赞