確定動態組件的高度

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/

我喜歡一個真正佈局方法。