html - 多标签形式的可滚动表格

Question

我花了很多时间寻找这个问题的答案，但似乎找不到这个特定问题的任何内容。 我有一个表格，我在其中声明了 3 个选项卡，在其中一个选项卡中，我想在表格中显示元素列表。我希望这张表占用所有可用的高度空间，列表的可滚动对于屏幕来说太长了。 到目前为止，这是我的代码:

    <div id="tab_accounts_form" style="display:block">
        <div class="tab_form">
            <table class="list_tab_form">
                @foreach (Company item in ViewBag.CompanyList)
                {
                    <tr class="row_tab_form">
                        <td class="col_rights_checkbox">
                            <input type="checkbox" id="@item.ID"/>
                        </td>
                        <td class="col_rights_label">
                            @item.CodeAndName
                        </td>
                    </tr>
                }
            </table>
        </div>
    </div>

还有CSS:

.row_tab_form td
{
    height:19px;
    padding: 0 0 0 0;
}

.list_tab_form
{
overflow-x: hidden;
overflow-y: auto;
}

.tab_form
{
    width: 100%;
    height: 100%;
    margin: 2px ;
    position: relative;
    padding : 23px 0 0 0;
}

.tab_accounts_form
{
    height:100%;
}

W使用此代码，并且列表长度超过可用高度，我的列表不可滚动但会完整显示，因此页面可滚动。我还设法为列表设置了固定高度，这样它就可以滚动，但我希望高度是动态的，以便它适应不同的屏幕尺寸。

谢谢。

编辑: fiddle 链接:http://jsfiddle.net/yo26bm0w/

Answer 1

我找到了一个解决方法，在一行两列的表格中声明我的两个 block 。这似乎是唯一的方法。