Question

我有两列页面布局。左列使用dataTable在列表中显示图像，因此div容器的高度未知。右栏只是空的div带边框。但我有这个正确的div容器和左容器一样高。有没有办法实现这个目标？这是我的布局

<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，如果不很多图片，则右列太高，反之亦然，右栏会如果我们有很多图像，那就太短了。有没有办法让他们的身高等于？

Answer 1

您可以在列加载后放置此jQuery：

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

Answer 2

以下是一些具有等高列的CSS方法：

http://css-tricks.com/fluid-width-equal-height-columns/

我喜欢One True Layout Method。

确定动态组件的高度

2 个答案: