确定动态组件的高度 [英] Determine the height of dynamic component

问题描述

我有一个两列的页面布局。左列使用 dataTable 在列表中显示图像，因此 div 容器的高度未知。右边的列是空的 div 带边框。但我有这个权利 div 容器要像左边的容器一样高。有办法做到这一点吗？这是我的布局

I have a two columns page layout. The left column display images inside a list using dataTable, so the height of the div container is unknown. The right column is just and empty div with border. But I have this right div container to be as tall as the left container. Is there a way to accomplish this? Here is my layout

<div id="pdfCol"> 
    <h:form>
        <p:dataTable value="#{myBean.imgageList}" var="item">
            <p:column style="border-bottom: 2px solid red;">
                <h:graphicImage value="resources/images/#{item}"/>
            </p:column>
        </p:dataTable>
    </h:form>
</div>
<div id="noteCol">

</div>

这是我的CSS

#pdfCol{    
    float: left;
    width: 930px;   
}

#noteCol{
    border: 1px solid black;
    float: left;
    width: 300px;
    height: 3000px;      
    position: relative;    
}

现在，右栏的高度 3000px ，如果有不许多图片，则右列太高，反之亦然，右列将太短，如果我们有很多图像。

so right now, the height of the right column is 3000px, if there are not many images, then the right column is too tall, and vice versa, the right column will be too short, if we have many images. Is there a way to make their height equals?

推荐答案

你可以在列加载后放置这个jQuery：

You can put this jQuery after the columns load:

$('#noteCol').css('height', $('#pdfCol').height());

这篇关于确定动态组件的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！