如何设置高度边框布局ZK自动适应父级尺寸

Question

一个有待回答的问题，为什么borderlayout设置height="100%"不起作用，但是当我使用像素设置高度时，它工作正常，我尝试添加vflex="1"但仍然没有任何反应，如何使其适合父尺寸自动地？ 这是我的祖尔代码：

<zk xmlns="http://www.zkoss.org/2005/zul">
    <window border="none" width="90%" height="min"
            apply="org.zkoss.bind.BindComposer" 
            viewModel="@id('vm') @init('com.dp.acction.adira.bitozen.interfaces.web.ui.viewmodel.CetakMainVM')">
        <!--    SUB-SUB -->        
    <borderlayout height="100%">
        <center>
            <borderlayout>
                <west  size="25%" collapsible="true">
                    <div style="background:#B8D335">
                        <label value="Test layout" />
                    </div>
                </west>
            <center>
                <div>
                     <vlayout>
                        <groupbox  width="100%"  visible="true">
                                     <caption label="${labels.common.label.hasil_pencarian}"
                                     style="color:blue" />
                                     <vlayout hflex="1" width="80%">
                                         <checkbox  name="chkBPKB" label="Print SPP/SIP BPKB" checked="@bind(vm.chkBPKB)" />
                                         <listbox model="@load(vm.poDTOs)" 
                                          mold="paging" 
                                          pageSize="10"
                                          height="50%"
                                          emptyMessage="Tidak ada data" 
                                          checkmark="true"
                                          width="100%"          
                                          selectedItem="@bind(vm.aksiSelectedPO)"
                                          onClick="@command('onCheckRadio')"  style="overflow:hidden">
                                             <listhead  >
                                                  <listheader  label="${labels.common.label.pilih}" width="50px" align="center"/>
                                                  <listheader label="${labels.common.label.sentra}" width="150px" align="center"/>
                                                  <listheader label="${labels.common.label.unit}" width="150px" align="center"/>
                                                  <listheader label="${labels.common.label.jenis_pihak_ketiga}" width="150px" align="center"/>
                                                  <listheader label="${labels.common.label.nama_pihak_ketiga}" width="150px" align="center"/>
                                                  <listheader label="${labels.common.label.no_po}" width="150px" align="center"/>
                                                  <listheader label="${labels.common.label.nama_lengkap}" width="150px" align="center"/>
                                                  <listheader label="${labels.common.label.no_aplikasi}" width="150px" align="center"/>
                                              </listhead>
                                              <template name="model"  status="s" var="item">
                                         <listitem>  
                                             <listcell />
                                             <listcell label="@load(item.sentraID)" />
                                             <listcell label="@load(item.unitID)" />
                                             <listcell label="@load(item.thirdPartyTypeID)" />
                                             <listcell label="@load(item.thirdPartyName)" /> 
                                             <listcell label="@load(item.poNumber)" /> 
                                             <listcell label="@load(item.customerName)" /> 
                                             <listcell label="@load(item.orderID)" /> 
                                         </listitem>                                          
                                         </template> 
                                         </listbox>
                                     </vlayout>
                                 </groupbox>     
                     </vlayout>
                </div>
            </center>
            </borderlayout>
        </center>    
    </borderlayout>
    </window>
</zk>

当我对此进行搜索时，我在zk论坛中发现了该线程，但仍然没有解决方案。

Answer 1

第一个问题：为什么将窗口的高度设置为“最小”？ 这是无效值。 呈现的html组件的元素样式将被浏览器忽略。 该窗口将与内容所需的一样高。

这就是问题所在：您的边框布局显示“父母，您有多少空间给我，我会尽您所能给我”（高度：100％）。 因此最终结果是该窗口的高度为0，因为它的所有子窗口都不需要任何固定的高度。

在zk文档中了解有关此确切问题的信息 。

因此，有两种解决方案：

• 将窗口的高度设置为100％或90％或500px或其他（最小值除外），它将起作用。 我尝试了100％的代码，它显示得很好。 这样，窗口将负责确定高度。 它占据了整个浏览器窗口，边框布局将填充100％。
• 如果要由内容（列表框）决定窗口的大小，请在列表框的所有父级上使用vflex="min" （直到内部vlayout为止的窗口）。这样，您的父母会问他们的孩子他们需要多少空间。 这将被委托给列表框，该列表框的大小取决于其行，绝对高度或rows属性。 （ 不要使用高度灵活的列表框，然后，否则你再有问题，没有人愿意的高度，一切都崩溃或者决定为0或扩展到全高）。

Answer 2

我使用style属性来解决div，borderlayout等组件中的autofit问题。

<listbox vflex="max" style="height: calc(100%)" width="100%">