zk - zk 中的右边空格

Question

我创建了一个带有列表框和按钮的网页，问题是当页面加载时，两个组件的右侧都会出现一个空白区域，但是如果调整页面大小，这些空白区域就会消失。

<zk xmlns="http://www.zkoss.org/2005/zul">
    <div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.valid.pmngr.product.ProductViewModel')" height="100%" width="100%" style="border: 3px solid red;">
        <style src="/css/style.css"/>
        <div height="94%" width="100%" style="border: 3px solid orange;">
            <vbox vflex="1" hflex="1" style="border: 3px solid blue;">
                <hbox align="end" width="100%" style="background-color:#282425; padding: 30px 0px 15px 60px">
                    <separator height="58px"/>
                    <image src="/img/Logo.png"/>
                </hbox> 
                <separator height="15px"/>

                <grid>
                    <auxhead>
                        <auxheader label="Products" zclass="auxheader-g"/>
                    </auxhead>
                    <columns />
                </grid>

                <listbox model="@load(vm.productStatusList)  @template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')"
                 vflex="1" >
                    <listhead sizable="true">
                        <listheader label="Name" align="center"/>
                        <listheader label="Vertical" align="center"/>
                        <listheader label="Business unit" align="center"/>
                        <listheader/>
                    </listhead>

                    <template name="noneditable">
                        <listitem>
                            <listcell>
                                <label width="98%" value="@bind(each.product.name)" />
                            </listcell> 
                            <listcell>
                                <label width="98%" value="@bind(each.product.vertical)" />
                            </listcell>
                            <listcell>
                                <label width="98%" value="@bind(each.product.businessUnit)" />
                            </listcell>
                            <listcell>
                                <button image="/img/edit.png" onClick="@command('edit')"/>
                                <button image="/img/delete.png" onClick="@command('delete')" />   
                            </listcell>    
                        </listitem>
                    </template>
                </listbox>

            </vbox>
        </div>
        <div vflex="min"  style="border: 3px solid purple;">
           <vbox hflex="1" vflex="1" style="border: 3px solid black;">
                <button label="New"  onClick="@command('newProduct')" />
           </vbox>
        </div>    
    </div>
</zk>

当页面以全屏加载时: 1

调整大小后: 2

问题是什么？

编辑

chrome、firefox、iExplorer出现空白，zk版本为8.0.1.1

Answer 1

我编辑了 your fiddle to this .你能看看它是否符合你的要求吗？
为了正确性，我改变了一些东西:

• 在分隔符中使用 spacing 属性代替 height。
• vbox 更改为 vlayout 因为 align 属性在这里是绝对的，并且 vlayout 在生成的 html 中更轻.
• 删除不需要的 width 和 hflex。
• 在不需要的地方删除 height 和 vflex，只在需要的地方设置。