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/

标签： htmlcssbootstrap-4

Answer 1

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

css

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