调整p：树以使用可用高度

Question

我的程序逻辑工作正常，但我无法弄清楚如何让关键组件将其大小调整到屏幕的可用高度。例如，我有：

            <p:layout id="workLayout" style="margin-top: 5px; height: 95%">

                <p:layoutUnit position="west"
                              resizable="true"
                              minSize="50"
                              size="200">

                    <h:form id="treeForm">
                        <p:tree value="#{workspace.listTree}"
                                var="node"
                                >
                            <p:treeNode>
                                <h:outputText value="#{node.name}" />
                            </p:treeNode>
                        </p:tree>
                    </h:form>

                </p:layoutUnit>

会发生的是它渲染的布局高度约为200px。 （CSS高度项无效）。只要在树中展开几个节点，就必须开始垂直滚动，同时在p：布局空间下面有很多浪费的空白区域。

有关如何做到这一点的任何提示？

更新：我发现如果我输入这样的绝对高度，我可以接近我想要的效果：

<p:layout id="workLayout" style="margin-top: 5px; height: 6in">

似乎高度值取决于某些外部容器。但是，如果是这种情况，为什么当我更改浏览器窗口的水平大小时，对象能够自行调整大小？我想要的是它也可以响应垂直尺寸。

Answer 1

在Primefaces 3.5中，p:tree的CSS开头

.ui-tree {
width: 300px;
position: relative;
}
.ui-tree .ui-tree-container {
margin: 0;
padding: 3px;
white-space: nowrap;
overflow: auto;
}

我会使用style属性来添加CSS属性使用需要：height:100%：<p:tree style="height:100%"/>。

在更改代码之前，请使用Chrome或Firefox的开发人员工具将此样式添加到树中，以确保其有效！

Answer 2

在我使用PrimeNg p-tree控件的组件代码中，我使用输入字符串变量并将其分配给ui-tree类高度。然后，您可以将其设置为像素或百分比高度：

import { Component, OnInit, Input, Renderer2, ElementRef} from '@angular/core 

export class PersonnelTreeComponent implements OnInit {

        @Input() height: string;
        treeheight: string = '400px';  

        constructor( private renderer: Renderer2, private elRef: ElementRef) { } 

        ngOnInit() { 
            if (this.height != null) {
                this.treeheight = this.height;
            }  
        }  

        ngAfterViewInit() {
            this.renderer.setStyle(this.elRef.nativeElement.querySelector('.ui-tree'), 'height', this.treeheight );  
        } 
    }

然后以通常的方式设置它：

<personneltree-component  [height]="'100%'"></personneltree-component>