How to make fixed header in gridView inside asp:panel?

Question

Hi I ran into a strange issue. I am able to put gridview inside asp:panel and scrolling works too. But the moment I down, the header of gridView scrolls above inside the panel and gets hidden.

I just want to scroll rows, not the header. How can I do that? Please advise. Following is what I am using.

On a side note, I have tried to wrap gridView in DIV but div doesn’t show the scroll bars in the first load for some reason.

Thanks

<asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="200" Width="60%">
<asp:GridView ID="GvBidLists" AllowSorting="true" AllowPaging="false" runat="server"
    AutoGenerateEditButton="true" DataKeyNames="ListId" EmptyDataText="No data available."
    AutoGenerateColumns="False" >
    <EditRowStyle BackColor="skyblue" />
    <HeaderStyle BackColor="LightSteelBlue" ForeColor="#0000C0" Height="20px" HorizontalAlign="Center" />
    <RowStyle Height="20px" VerticalAlign="Middle" />
    <FooterStyle BorderColor="White" Height="20px" HorizontalAlign="Center" />
    <Columns>
        <asp:BoundField HeaderText="ListId" DataField="ListId" SortExpression="ListId" />
        <asp:BoundField HeaderText="ListName" DataField="ListName" SortExpression="ListName" />
        <asp:BoundField HeaderText="ProductTypeName" DataField="ProductTypeName" SortExpression="ProductTypeName" />
        <asp:BoundField HeaderText="Size" DataField="Size" SortExpression="Size" />
    </Columns>
</asp:GridView>