信息不在包含的 div 内

Question

我有一个 div 表由 div 内的 ui:repeat 构建，但它不在包含 div 的边界内。

目标是让包含的 div 限制大小并有一个滚动条来查看里面的表格的其余部分。

根据我的研究，它应该只是包含 div 的 css 中的 overflow-y: auto，但无论我如何加载信息，多余的内容都会向下推页面。

布局sn-p：

<div id="idCenterRow">
    <div id="idCenterRowMain">
        <h:form id="idForm"  enctype="multipart/form-data"  prependId="false">
            <ui:include src="#{Bean1.Content()}"></ui:include>
        </h:form>
    </div>
</div>

内容页面：

<p id="idCenterContent">
    This is some text.
        <div id="idTableMyList">
            <!--<c:set value="#{Bean2.setPersonalList(Bean3)}" var="tickle"></c:set>-->
            <ui:repeat var="x" value="#{Bean2.pl}" size="#{Bean2.getPLSize()}" varStatus="myVarStatus">
                <div class="classTableMyListRow">
                    <div class="classTableMyListRowData"><h:outputText class="classTableMyListRowDataText" value="#{myVarStatus.index+1}" /></div>
                    <div class="classTableMyListRowData"><h:outputText class="classTableMyListRowDataText" value="#{x[0]}" /></div>
                    <div class="classTableMyListRowData"><img class="classTableMyListRowDataPicture" src="#{Bean2.path}#{Bean2.folder}#{x[1]}" /></div>
                </div>
            </ui:repeat>
        </div>
</p>

CSS：

#idCenterRow
{
    height: 70%;
    height: 85vh;
    max-height: 85%;
    max-height: 85vh;
    width: 100%;
    width: 100vw;
    max-width: 100%;
    max-width: 100vw;

    border: 0px solid #e9f413;
    vertical-align: top;
    display: table-row;
}

#idCenterRowMain
{
    height: 100%;
    height: 85vh;
    max-height: 100%;
    max-height: 85vh;
    width: 70%;
    width: 70vw;
    max-width: 70%;
    max-width: 70vw;

    margin: 0px;
    padding: 0px;
    border: 1px solid #13ecf4;
    vertical-align: top;
    overflow-y: scroll;

    display: table-cell;
    vertical-align: top;
}

#idTableMyList
{
    height: 80%;
    height: 80vh;
    max-height: 80%;
    max-height: 80vh;
    width: 70%;
    width: 70vw;
    max-width: 70%;
    max-width: 70vw;

    text-align: center;
    margin: 0px;
    padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    color: #aaaaaa;
    overflow: auto;

    border: 1px solid #f702f7;

    vertical-align: top;
    display: table;
} 



.classTableMyListRow
{
    height: 75%;
    height: 50vh;
    max-height: 75%;
    max-height: 50vh;
    width: 100%;
    width: 70vw;
    max-width: 100%;
    max-width: 70vw;

    border: 1px solid #f702f7;

    display: table-row;
}

.classTableMyListRowData
{
    height: 100%;
    height: 50vh;
    max-height: 100%;
    max-height: 50vh;
    width: auto;

    border: 1px solid #f702f7;

    vertical-align: top;
    display: table-cell;
}

.classTableMyListRowDataText
{
    color: #aaaaaa;
}

.classTableMyListRowDataPicture
{
    height: 100%;
    height: 50vh;
    max-height: 100%;
    max-height: 50vh;
    //width: 35%;
    //width: 35vw;
    width: auto;
    //max-width: 35%;
    //max-width: 35vw;

    object-fit: fill;
    -o-object-fit: fill;
    -moz-object-fit: fill;
    margin: auto;

    display: block;
}

Answer 1

看完这篇文章：Using max-height on DIV element

我尝试在 CSS 中删除 display: table 元素，并且该行为现在可以正常工作。

我恢复了显示：table-row和table-cell来排列信息，但至少溢出问题解决了。