Question

我有一个显示数据的表，它滚动查看该表中的其余数据。问题是滚动时我无法到达表格的底部。这段代码是以前开发人员的现有代码，鉴于我对CSS不太了解，因此我试图了解是什么阻止了它滚动到底部。任何帮助，将不胜感激，谢谢。

当我删除第一个div时，滚动工作正常，但问题是同一页面中还有其他三个表，并且它们的显示取决于单击的按钮，因此我需要将该div保留在该位置。

注意：this.RenderBody（）返回一个元素数组。在此表上方还有另外三个表，它们也遇到同样的问题。 .tableData只是宽度不同。

myFile.js

                <div className="JobTabContentContainer" id="PendingContainer">
                    <table className="TableHeaderContainer">
                        <thead>
                            <tr>
                                <th className="tableData10">Data1</th>
                                <th className="tableData10">Data2</th>
                                <th className="tableData10" >Data3</th>
                                <th className="tableData10" >Data4</th>
                                <th className="tableData12" >Data5</th>
                                <th className="tableData8"  >Data6</th>
                                <th className="tableData10" >Data7</th>
                                <th className="tableData10" >Data8</th>
                                <th className="tableData10" >Data9</th>
                                <th className="tableData10" >Data10</th>
                            </tr>
                        </thead>
                    </table>

                    <div className="TableBodyScrollingDiv">
                        <table className="TableBodyContainer">
                            <tbody>  
                           {this.RenderBody("Pending",this.props.jobData)}
                            </tbody>
                        </table>
                    </div>
                </div>

myFile.css


     .JobTabContentContainer {
        flex: 1;
        display: none;
        flex-direction: column;
    }
.ViewedContentContainer {
    height: 95%;
    display: flex;
    flex-direction: column;
    /* overflow-y: auto; */
}

    .ViewedContentContainer .TopBarContainer,
    .ViewedContentContainer .BottomBarContainer,
    .ViewedContentContainer .TitleBarContainer {
        min-height: fit-content;
        min-width: 916px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: sticky;
        left: 0;
        right: 0;
    }


    .ViewedContentContainer .TitleBarContainer {
        text-align:center;
    }
    .ViewedContentContainer .TitleBarContainer h1 {
        margin: 0;
        padding: 0;
    }

        .ViewedContentContainer .TopBarContainer .TopBarSearchInput {
            float: right;
            width: 40%;
            max-width: 200px;
        }

    .ViewedContentContainer .TableHeaderContainer {
        border: 2px solid var(--Blue);
        background-color: var(--Blue);
        color: var(--LighterBlue);
        text-align: center;
        min-width: 916px;
    }

    .ViewedContentContainer .TableBodyScrollingDiv {
        text-align: center;
        border: 2px solid var(--Blue);
        background-color: white;
        overflow-y: auto;
        overflow-x: hidden;
        min-width: 916px;
        max-height: 90%
    }

        .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer {
            width: 100%;
            font-size: 10px;
        }
            .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow {
                display: table-row;
            }
                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:nth-child(odd) {
                    background-color: var(--LightBlue);
                    color: var(--DarkBlue);
                }

                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:nth-child(even) {
                    background-color: var(--LighterBlue);
                    color: var(--DarkBlue);
                }

                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:hover {
                    background-color: var(--AccentBlue);
                    color: var(--DarkBlue);
                }

                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow td{
                    word-wrap: break-word;
                }

                .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow .JobReviewStatusBtn {
                    border-radius: 5px;
                }

这从来都不是问题，最近在应用程序上显示的表才开始执行此操作，所以我不知道这是一个溢出问题还是更简单的事情。

Answer 1

我增加了身高：100％

     .JobTabContentContainer {
        height: 100%
        flex: 1;
        display: none;
        flex-direction: column;
    }

这似乎可行，但我不知道为什么

Answer 2

正在滚动的容器可能溢出了超过其父容器的大小，并且溢出被隐藏了。找到具有滚动条的容器的父级，然后删除设置的高度，将溢出设置为可见：或将可滚动div的设置大小缩小为小于其父级。

滚动条不会一直滚动到表格底部

2 个答案: