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

Posted 2023-02-22

【中文标题】滚动条不会一直滚动到我的表格底部

【英文标题】：Scroll bar doesn't scroll all the way to the bottom of my table

【发布时间】：2019-12-19 03:08:02

【问题描述】：

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

当我删除第一个 div 时，滚动工作正常，但问题是同一页面内还有其他三个表，它们根据单击的按钮显示，所以我需要保留该 div。

注意：this.RenderBody() 返回一个元素数组。在这个上面还有三个这样的表，他们也遇到了同样的问题。 .tableData 只是宽度不同。

我的文件.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>

我的文件.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;
                

这从来都不是问题，应用程序上显示的表格最近才开始这样做，所以我不知道这是溢出问题还是更简单的问题。

【参考方案1】：

我在高度上加了：100%

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

这似乎有效，但我不知道为什么

【参考方案2】：

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

【讨论】：

如果我去掉第一个 div，它也会按照我想要的方式工作，但是该表也将显示当前表。我觉得这是如何将 html 封装在该 div 中的问题。