Question

我的高度为100％的div出了问题。在该div中我有表记录，但最后5条记录不可见，因为滚动条在到达那些记录之前停止。

html结构的一个例子：

看起来list-header会导致问题，因为当我删除该div时，最后的记录是可见的。知道如何解决这个问题吗？

Answer 1

<div class="main">
    <div class="list">
        <div class="list-table">
            <table>
                <thead>
                    <tr><td>header</td></tr>
                </thead>
                <tbody>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>tesdst</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>test</td></tr>
                <tr><td>2nd</td></tr>
                <tr><td>Last</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

使用thead代替您创建的div这是最佳做法，因为您仍然可以使用thead表格单元格中的按钮和所有内容。

无论如何：

你需要使列表表格更小90％工作正常。

以下是jsfiddle

解释：

您父级Div“list”的高度为100％，“list-header”的高度为70px，“list-table”的高度为100％。 “list-table”的100％+“list-header”的70px高度等于100％以上。所以你需要让你的“列表”更大或者其中的孩子更小 - rember你总是需要将父母的高度分成孩子以使它们适合。那可以理解吗？

Answer 2

您必须在position:fixed课程中使用.main吗？试试没有那个

Answer 3

.list-table {
    height:80vh;
    overflow: auto;
}

滚动条和隐形内容的高度为100％

3 个答案: