jsf - 如何根据周围的 div 容器动态调整 primefaces 画廊的大小

Question

（如何）是否可以根据周围 div 容器的大小动态调整 primefaces Galleria 的大小？画廊应该总是填满整个周围的 div 容器。

jscript/jquery 是正确的方法吗？

http://www.primefaces.org/showcase-labs/ui/galleria.jsf

Answer 1

尝试将.ui-galleria宽度属性设置为 100%。确保 css 类是相对的。

Answer 2

我正在尝试类似的东西，我也遇到了一个问题。

我正在使用这样的 p:galleria 元素：

<h:form id="galleriaForm" style="border: 2px solid blueviolet; min-height: 800px">
        <p:panelGrid columns="1" layout="grid" style="border: 2px solid aqua; min-height: 100%">
                    <p:row style="display: inline-block; min-height: 800px;border: 2px solid green; min-width: 100%">
                        <p:column style="display: inline-block; min-height: 100%; min-width: 100%;border: 2px solid red">
                            <p:outputLabel value="Überschrift" style="display: block;"/>
                            <p:galleria value="#{ImageManager.layoutBauenBilderlsite}" 
                                        id="galleriaID"
                                        var="image" 
                                        showCaption="false" 
                                        transitionInterval="9000"
                                        effectSpeed="1500" 
                                        style="display: inline-block; min-width: 100%"
                                        effect="drop"
                                        panelHeight="">
                                <p:graphicImage url="resources/images/#{image}" 
                                                style="height: 1040px; border:1px dotted lightgray; margin-left: 30%"/>
                            </p:galleria>
                        </p:column>
                    </p:row>
        </p:panelGrid>
    </h:form>

要更改 panelHeight 属性，h:body 使用 onload 调用 js 函数：

    function setGalleriaHeight(){
    var h = window.innerHeight;
    document.getElementById("galleriaForm:galleriaID").setAttribute("panelHeight", String(h));
}

panelHeight 属性设置正确，正如我在浏览器中看到的那样，但元素没有改变。

为了确保属性正确，我将它添加到我的源代码中并且它工作正常。

我还尝试将大小设置为 style="height: h" 但只有加载的图像“p:graphicImage 不会调整大小。

也许有人知道为什么它没有改变。

Answer 3

为了使画廊和里面的图片都填满容器，添加css：

 .ui-panel-images {
    width: 100%;
    height: 100%;
}

.ui-galleria-panel {
    width: 100%;
    height: 100%;
}

此外，将以下内容添加到 p-galleria 元素： panelWidth="auto"