顶部，底部和右侧滚动条的网格视图

Question

我认为我接近在这里找到的jsFiddle之后的所有设置： JsFiddle但是，我遇到的问题是，我实际上顶部没有滚动条，并且由于设置div2的高度，底部滚动条在页面上向下。需要编辑什么才能使网格视图自动调整高度，并使滚动条位于顶部和底部？

<div class="wrapper1">
<div class="div1"></div>
</div>
<div class="wrapper2">
<div class="div2">
    <asp:GridView ID="returndata" runat="server" Visible="True" AutoGenerateColumns="false" 
        ShowFooter="true" Width="1000px" Height="300px" >
        <columns>       
            <asp:BoundField DataField="abcd" HeaderText="J12121212e" />
            <asp:BoundField DataField="efg" HeaderText="12112" />       
            <asp:BoundField DataField="hij" HeaderText="2323" />
            <asp:BoundField DataField="klm" HeaderText="S" />
            <asp:BoundField DataField="nop" HeaderText="C" />
            <asp:BoundField DataField="qrs" HeaderText="88"  />
            <asp:BoundField DataField="tuv" HeaderText="8" />
            <asp:BoundField DataField="wzr" HeaderText="8888" />
            <asp:BoundField DataField="erre" HeaderText="22222" />  
            <asp:BoundField DataField="aca" HeaderText="1111"/>     
            <asp:BoundField DataField="acsa" HeaderText="222" />
            <asp:BoundField DataField="ere" HeaderText="3131" />            
            <asp:BoundField DataField="asdf" HeaderText="31" />
            <asp:BoundField DataField="dasf" HeaderText="33" />
            <asp:BoundField DataField="qq" HeaderText="3" />
            <asp:BoundField DataField="xga" HeaderText="21" />
            <asp:BoundField DataField="qqqqq" HeaderText="2" />
            <asp:BoundField DataField="mm" HeaderText="1" />
            <asp:BoundField DataField="adfasdf" HeaderText="11" />
        </columns>
    </asp:GridView>
</div>
</div>
    <style type="text/css">
    .wrapper1, .wrapper2{width: 1000px; border: none 0px RED; overflow-x: scroll; overflow-y:hidden;}
    .wrapper1{height: 16px; }
    .wrapper2{height: auto; }
    .div1 {width:1000px; height: 12px; }
    .div2 {width:1000px; height: 600px; overflow: auto;}
</style>