html - 在 iPhone 上被页脚隐藏的表格内容

Question

我在 iphone 上尝试显示“时间线”时遇到了一些问题，时间线只是一个包含其内容的表格。

问题是，如果我在 iPhone 上有 30 行，则只显示 28 行，而其他两行在页脚后面，只有当我滚动整个页面而不是 div 时，我才能显示它们。

我如何设置表格的高度，使其在页脚开始而不是页面结束时结束？

页面构建如下(表格内容动态加载)

        <div class="container-fluid p-0">

            <div class="card rounded-0" id="cardTav">
                <div id="bodyTavoli" class="card-body text-center">
                    <div class="table-responsive tableFixHead">
                        <table class="table table-hover" id="tableLine" border="0" style="border: none; width: 100%; margin-bottom: 0px;">
                            <thead id="timehead">
                                <tr>
                                </tr>
                            </thead>
                            <tbody id="timeline">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>

        <footer class="footer">
            <div class="container">
            </div>
        </footer>

这是 JSFiddle 代码(容器上方有导航)https://jsfiddle.net/3hvLwt6m/

Answer 1

请修改您的 css 代码更改如下所示

CSS

.tableFixHead {
    overflow-y: auto;
    max-height: 70vh;
}