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%;
}

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

谢谢。

编辑：链接到小提琴：http://jsfiddle.net/yo26bm0w/

Answer 1

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

多图表形式的可滚动表格

1 个答案: