I dynamically fill in grid, and want to have scrollbar for case if grid has height more than 250 px. But if there only few rows we can see extra white space at the bottom.
I tried use <grid id="dataGrid" style="max-height:300px;overflow:auto;position:relative;">, but scrolling process hides columns headers, and it's bad for usability.
How to avoid white space?(Sorry if it's duplication of existed topic)

<zk>
<window border="normal" title="Grid Display" >

<div>The data is displayed in Grid below:</div>

<separator height="10px" />
<div style="overflow:auto;position:relative">
<grid id="dataGrid" height="250px">
<columns>
<column label="Column1"/>
<column label="Column2" />
<column label="Column3" />

</columns>
<rows>

<row>
<checkbox checked="true" label="Option 1"/>
<checkbox label="Option 2"/>
<radiogroup>
<radio label="Apple"/>
<radio label="Orange" checked="true"/>
<radio label="Lemon"/>
</radiogroup>
</row>

<row>
<checkbox checked="true" label="Option 1"/>
<checkbox label="Option 2"/>
<radiogroup>
<radio label="Apple"/>
<radio label="Orange" checked="true"/>
<radio label="Lemon"/>
</radiogroup>
</row>
</rows>
</grid>
</div>
</window>
</zk>