Question

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

目标是让包含div来限制大小，并使用滚动条查看内部表格的其余部分。

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

布局摘要：

<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以排列信息，但至少解决了溢出问题。

不包含在内容div中的信息

1 个答案: