Grid footer does not align properly, when we set overflow style to grid body.

<?page title="grid exploring" contentType="text/html;charset=UTF-8"?>
<zk>
	<style>
		div.z-grid-body {overflow-x: hidden; overflow-y: scroll;
		background: #FFF; }
	</style>
	<window title="grid exploring" border="normal">
		<grid id="griddemo" fixedLayout="true" vflex="false"
			height="108px">
			<columns sizable="false">
				<column align="left" width="25%" label="col1" />
				<column align="center" width="8%" label="col2" />
				<column align="center" width="8%" label="col3" />
				<column align="center" width="5%" label="col4" />
				<column align="center" width="5%" label="col5" />
				<column align="center" width="5%" label="col6" />
				<column align="center" width="7%" label="col7" />
				<column align="center" width="7%" label="col8" />
				<column align="center" width="7%" label="col9" />
				<column align="center" width="7%" label="col10" />
				<column align="center" width="7%" label="col11" />
				<column align="center" width="9%" label="col12" />
			</columns>
			<rows>
				<row>
					<label value="Item 1" />
					<label value="ABCD0001" />
					<label value="ABCD0001" />
					<label value="999" />
					<label value="999" />
					<label value="999" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="999999.99" />
				</row>
				<row>
					<label value="Item 2" />
					<label value="ABCD0001" />
					<label value="ABCD0001" />
					<label value="999" />
					<label value="999" />
					<label value="999" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="999999.99" />
				</row>
				<row>
					<label value="LG Mobile" />
					<label value="ABCD0001" />
					<label value="ABCD0001" />
					<label value="999" />
					<label value="999" />
					<label value="999" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="9999.99" />
					<label value="999999.99" />
				</row>
			</rows>
			<zscript><![CDATA[
]]></zscript>
			<foot>
				<footer>
					<textbox value="Totals" />
				</footer>
				<footer>
					<textbox />
				</footer>
				<footer>
					<textbox />
				</footer>
				<footer>
					<textbox value="999" />
				</footer>
				<footer>
					<textbox value="999" />
				</footer>
				<footer>
					<textbox value="999" />
				</footer>
				<footer>
					<textbox />
				</footer>
				<footer>
					<textbox value="9999.99" />
				</footer>
				<footer>
					<textbox value="9999.99" />
				</footer>
				<footer>
					<textbox value="9999.99" />
				</footer>
				<footer>
					<textbox value="9999.99" />
				</footer>
				<footer width="90px">
					<textbox value="999999.99" />
				</footer>
			</foot>
		</grid>
	</window>
</zk>

<style>
		div.z-grid-body {overflow-x: hidden; overflow-y: scroll;
		background: #FFF; }
		div.z-grid-footer {overflow-x: hidden; overflow-y: scroll;}
	</style>