如何在DataTable数据增多时让按钮自动位于其下方

当前p:dialog固定了400px高度，p:dataTable也设置了350px固定高度，当表格内容增多时，表格滚动条出现，但表格高度加按钮高度及间距超出对话框限制，导致按钮与表格内容重叠。

方案1：Flex布局实现表格自适应剩余空间 #

通过CSS Flex布局让表格自动填充对话框的剩余高度，按钮始终固定在表格下方，不发生重叠。修改后的代码如下：

<p:dialog id="handOverIdsTable" widgetVar="dialogBox" modal="true" resizable="false"
          class="no-top-bottom-padding custom-dialog custom-dialog-hide-titlebar" height="400px" width="600px"
          style="background:white repeat-x scroll 0% 0% transparent;background-color:white; opacity: 1.0; display:flex; flex-direction:column;">
    <h:form style="flex:1; display:flex; flex-direction:column;">
        <p:dataTable id="dataTable1" var="dt1" value="#{flipBean.dataList}"
                     disabledSelection="#{flipBean.getSelectedItems}"
                     selection="#{flipBean.sysDetails}" rowKey="#{dt1.Id}"
                     rowSelectMode="checkbox" styleClass="table-border datatable-15-margin-left datatable-97-width"
                     style="margin-bottom:20px; flex:1; overflow:auto;" paginator="true" rows="5" selectionPageOnly="false">
            <p:column selectionMode="multiple" style="width:6%;vertical-align: top!important;" styleClass="custom-th custom-td" />
            <p:column headerText="Id">
                <h:outputText value="#{dt1.Id}" />
            </p:column>

            <p:column headerText="Weight">
                <h:outputText value="#{dt1.weight} #{dt1.weight_symbol}" />
            </p:column>

            <p:column headerText="Items">
                <h:outputText value="#{dt1.items}" />
            </p:column>
            
        </p:dataTable>
        <p:commandButton value="OK" id="finishBtn"
                         style="width: 160px; height: 37px; margin-left:200px; color:green"
                         onclick="#{flipBean.getSystemDetails(flipBean.sysDetails)};" update="flipForm:rqstPickUpOP, flipForm:itemTbl, messages"
                         oncomplete="PF('dialogBox').hide();"
                         />
    </h:form>
</p:dialog>

核心修改：

• 给对话框添加display:flex; flex-direction:column;，让内部元素垂直排列
• 表单设置flex:1; display:flex; flex-direction:column;，占满对话框可用空间
• 表格去掉固定高度，改为flex:1; overflow:auto;，自动填充剩余空间，内容过多时显示滚动条

方案2：取消对话框固定高度（允许高度自适应） #

如果业务允许对话框高度随内容调整，直接移除height="400px"属性，对话框会根据表格和按钮的总高度自动适配，彻底避免重叠：

<p:dialog id="handOverIdsTable" widgetVar="dialogBox" modal="true" resizable="false"
          class="no-top-bottom-padding custom-dialog custom-dialog-hide-titlebar" width="600px"
          style="background:white repeat-x scroll 0% 0% transparent;background-color:white; opacity: 1.0;">
    <h:form>
         <p:dataTable id="dataTable1" var="dt1" value="#{flipBean.dataList}"
                     disabledSelection="#{flipBean.getSelectedItems}"
                     selection="#{flipBean.sysDetails}" rowKey="#{dt1.Id}"
                     rowSelectMode="checkbox" styleClass="table-border datatable-15-margin-left datatable-97-width"
                     style="margin-bottom:20px;" paginator="true" rows="5" selectionPageOnly="false">
            <!-- 列代码保持不变 -->
        </p:dataTable>
        <!-- 按钮代码保持不变 -->
    </h:form>
</p:dialog>

提示：若担心表格内容过多导致对话框过高，可给表格添加scrollable="true"和scrollHeight="300px"，限制表格滚动区域高度。

方案3：使用PrimeFaces原生滚动属性 #

给表格添加scrollable="true"并设置固定滚动高度，让表格内容在限定区域内滚动，按钮始终位于表格下方：

<p:dataTable id="dataTable1" var="dt1" value="#{flipBean.dataList}"
             disabledSelection="#{flipBean.getSelectedItems}"
             selection="#{flipBean.sysDetails}" rowKey="#{dt1.Id}"
             rowSelectMode="checkbox" styleClass="table-border datatable-15-margin-left datatable-97-width"
             style="margin-bottom:20px;" paginator="true" rows="5" selectionPageOnly="false"
             scrollable="true" scrollHeight="300px">
    <!-- 列代码保持不变 -->
</p:dataTable>

同时将对话框高度调整为380px左右，确保表格和按钮都能容纳。

内容的提问来源于stack exchange，提问作者Calvin NewGate