Блог

Главная - Вопросы по программированию - Определить высоту динамического компонента

Определить высоту динамического компонента

#jquery #css #jsf

#jquery #css #jsf

Вопрос:

У меня макет страницы в два столбца. В левом столбце отображаются изображения внутри списка с использованием 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 , если изображений не много, то правый столбец слишком высокий, и наоборот, правый столбец будет слишком коротким, если у нас много изображений. Есть ли способ сделать их высоту равной?

Ответ №1:

Вы можете поместить этот jQuery после загрузки столбцов:

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

Комментарии:

1. Мне жаль снова ограничивать вас, но ваш способ работает только для FireFox. Это не работает для Chrome и Safari. И я не уверен насчет IE. Есть ли у вас кроссбраузерное решение?

Ответ №2:

Вот несколько CSS-способов создания столбцов одинаковой высоты:

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

Мне нравится единственный верный метод компоновки.