Question

我需要一个固定大小的容器（没有卷轴）中包含的垂直堆栈块（可能带有滚动）。可见块的数量由js代码动态管理。某些块可以设置为隐藏或可见。隐藏一些块后，可见块应占用所有可用空间。

我使用了table元素。但表格单元格是垂直扩展的，整个表格垂直扩展到底部大小。

如何修复桌面高度？或者可以使用其他一些设计？

这是HTML和CSS：

＆＃13;

table{
    table-layout:fixed;
    width: 200px;
    height: 300px;
}
div{
    height: 100%;
    width: 100%;
    overflow-y:scroll;
    white-space:normal;
}

＆＃13;

<table border="1">
    <tr><td><div>
        dsdgfsjafkgasfd sajhsadfhsafdsfsafs afsafsafsafsa fsafsafsafsafsaf
        asfsafsafsafsafsafs afsaffsfsasafsafsfa sfasfsafsafsaffsafsaffsafsa 
    </div></td></tr>
    <tr><td><div>
        dsdgfsja fkgascfdsajhsadfhsafdsfsaf safsafsafsafs afsafsafsafsafsaf
        asfsafsafsaf safsafsafs affsfsasafsafsfa sfasfsafsafsaffsafsaffsafsa
    </div>
</table>

＆＃13;

Answer 1

这是一个带有固定高度容器和滚动条的解决方案。我添加了边框来显示内部块和容器：如果需要，可以删除它们。

#container {
    border:1px solid black;
    display:inline-block;
    overflow-y:scroll;
    width: 200px;
    height: 300px;
}

#content {
    border:1px solid green;
    height: 100%;
    overflow-y:scroll;
}

Fiddle

Css - 与卷轴的垂直堆栈的容器

1 个答案: